BUG(compiler): invalid end tag
Vue version
3.2.45
Link to minimal reproduction
https://stackblitz.com/edit/vitejs-vite-hstxal?file=src/App.vue
Steps to reproduce
when the setup script has string: <script>
<script lang="ts" setup>
const article = `<script></script>`
</script>
or
<script lang="ts" setup>
const article = `<script>`
</script>
What is expected?
expect everything is right.
What is actually happening?
throw a Invalid end tag
.
System Info
System:
OS: macOS 13.0
CPU: (10) arm64 Apple M1 Pro
Memory: 144.17 MB / 16.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 18.12.0 - ~/.nvm/versions/node/v18.12.0/bin/node
Yarn: 1.22.19 - ~/Library/pnpm/yarn
npm: 8.19.2 - ~/.nvm/versions/node/v18.12.0/bin/npm
Browsers:
Chrome: 109.0.5414.119
Firefox Developer Edition: 105.0
Safari: 16.1
Any additional comments?
No response
You cannot use a '</script>'
string literal inside the <script>
block in an HTML page. This is how HTML parsers expected to work and Vue's SFC syntax is HTML-compliant which means the restriction also applies to it.
You can work this around either as suggested by the HTML spec like:
<script lang="ts" setup>
const article = '<script>\x3Cscript>'
</script>
or workaround it like:
<script lang="ts" setup>
const article = '<script></' + 'script>'
</script>