Vue: component-parse will report some error if we put a correct js string which containing '</script>' in script section
Version
2.4.2
Reproduction link
https://github.com/hccde/vue-bug.git
Steps to reproduce
.cd repo/test-bugnpm installnpm run dev
then you will see the error in terminal
What is expected?
run correctly
What is actually happening?
build error
a component can be split into 3 sections : script ,* style* and script. this bug happened in script section .when we have a js string like:
```
var testString = ''
```
so it may appear like this:
<template>
<div>
test
</div>
</template>
<script>
var testString = '</script>'
</script>
<style>
</style>
in script section,we failed to build
hccde
All 9 comments
It's a parse error in vue-loader. Please open an issue there https://github.com/vuejs/vue-loader/issues.
Well the template compiler code resides in this repo so maybe it's OK.
zxc0328
on 24 Aug 2017
@zxc0328 hey,i'm reviewing the code now,i think it comes from vue-template-compiler .but vue-template-compiler is built by vue/src compiler. so,i open an issue here.
hccde
on 24 Aug 2017
You should add a backslash before slash to escape it.
var testString = '<\/script>'
javoski
on 24 Aug 2017
@javoski it works! But obviously it's parse bug.solve the problem uglily. i have found out why this bug happened.if have time,i will give a pr
hccde
on 24 Aug 2017
Actually, the default HTML parser of most (maybe all) browsers will interpret '' within a javascript string as the end script tag, so I don't think Vue can(should) do more on this.
javoski
on 24 Aug 2017
@jakovski, that is right, that's a part of HTML spec, it doesn't parse javascript inside, it just looks for </script> so this is expected.
@hccde, you can check it with htmlparser2 or parse5 on astexplorer
nickmessing
on 24 Aug 2017
@javoski @nickmessing that's true. '' in inline script in html need to be escaped,because browsers don't know it's a js string *. but *Vue,to be exact,vue-template can distinguish between js string and tag name,because a .vue file has only one script section . when we meet a '' string,don't take it as the close tag immediately but look behind （ not look ahead :) )，if we find another '',look behind again,utill we find this '' is the last one ,then this is the correct close tag.as I mentioned above,Vue or Vue template can solve this problem elegantly.it can ,it shoud,and it do better. browsers can't do this,because it may have many inline script sections,like ：
<html>
<script>
console.log('section one')
</script>
<script>
console.log('section two')
</script>
</html>
so ,that's all.
hccde
on 24 Aug 2017
These generated Javascript codes will eventually be embedded into HTML files, it's ok if these codes are in a separated js file, but it depends on the building process, I don't think that's a good idea.
javoski
on 24 Aug 2017
@javoski thus this is not usual situation, considering this code may be embedded into HTML files,we should not do more. you are right.
hccde
on 24 Aug 2017
Related issues
karevn
·
42Comments
karevn
·
36Comments
eu81273
·
40Comments
ShuvoHabib
·
40Comments
rpkilby
·
50Comments
Most helpful comment
These generated Javascript codes will eventually be embedded into HTML files, it's ok if these codes are in a separated js file, but it depends on the building process, I don't think that's a good idea.