Vue-loader: '</script>' in javascript string fails

[bernhardreiter]

Placing a string in the script section of a .vue file that includes '' fails with
Module build failed: SyntaxError: Unterminated string constant

Expected behaviour: will be parsed fine.

Idea: probably the parsing terminated the script section.

vue --version
2.5.1
├── [email protected]
└── [email protected]

vue init webpack-simple defect-ber1
cd defect-ber1
npm install

<script>
export default {
  name: 'app',
  data () {
    return {
        msg: 'Welcome to Your Vue.js </script>App'
    }
  }
}
</script>

npm run dev

ERROR in ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
Module build failed: SyntaxError: Unterminated string constant (27:13)

  25 |   data () {
  26 |     return {
> 27 |         msg: 'Welcome to Your Vue.js 
     |              ^

[yyx990803]

This would cause the same error in HTML files. Just escape the ending script:

export default {
  name: 'app',
  data () {
    return {
        msg: 'Welcome to Your Vue.js <\/script>App'
    }
  }
}

[bahmutov]

I just want to note that @bernhardreiter has the string in the <script> section of the template, so the HTML parsing rule seems not to apply?

[yyx990803]

@bahmutov the entire Vue file is parsed using HTML parsing rules

[paultofunmi]

Cheers @yyx990803. Escaping the ending string worked.

[simeydotme]

My use-case was that I needed to generate a chunk of HTML which included <script> tag to 3rd party.

• I couldn't place the script tag directly in the template; Error compiling template
• replacing a dummy-element with <script> on demand causes; Unterminated string constant
• if I escape, then the vue-cli default linting rules complain; Unnecessary escape character

---

So my final solution is to use a dummy-element (hidden <br> tag) and replace it on demand, escape the replaced <script>, and finally disable linting for that line.

output = liveView.outerHTML.replace(
    /<br type="script" (.*?)>/,
    // eslint-disable-next-line
    "<script $1><\/script>"
);

[flexchar]

Pretty much same error trying to have HTML markup that includes script tag inside template literals.

const example = `<script type="text/javascript" src="//domain.com/files/js/app.js"></script><div data-pid="id123" style="display: none;"></div>`

causes various compilation errors