Subscribe on changes!

BUG(compiler): invalid end tag

avatar
Feb 6th 2023

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

avatar
Feb 6th 2023

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>