Vue-loader: When I set an attribute be a string which include '<script>' tag, module build will fail.

[hejianxian]

HI!

I've some questions about vue-loader.

If I do that:

created(){
    this.test = `<script></script>`;
    // or just annotate
    // this.test = `<script></script>`;
}

It will throw an error:

Module build failed: Error: [vue-loader] Only one <script> or <template> tag is allowed inside a Vue component.

I konw that only one <script> tag is allowed inside a Vue component, but this is just a string and annotate.

I feel a bit puzzled, is this not allowed too?

[yyx990803]

This is how HTML is parsed. Doing the same in an HTML file will also cause an error.

You can escape the slash:

this.test = `<script><\/script>`

[RedNuttyGuy]

Hi @yyx990803 ,

I think this is still an issue.

You can escape the slash:

Yeah I can, but my linting rules (prettier) prevent me from escaping the forward slash as it is an 'unnecessary escape'. I don't think adding a rule to my configuration just for this issue is worth the effort, and I don't think it should be happening in the first place as it is such an unexpected behavior.

This is how HTML is parsed. Doing the same in an HTML file will also cause an error.

I was under the impression that the code inside <script> tags was treated as JavaScript (or TypeScript) and not html, I wouldn't think that it would be that much of an issue recognizing that a closing <script> tag exists in a string literal or comment, although I could be wrong.

Any reason as to why this shouldn't be fixed in regards to my thoughts above?