nuxt Error parsing JavaScript expression: Expecting Unicode escape sequence \uXXXX

Environment

Operating System: Windows_NT
Node Version: v20.10.0
Nuxt Version: 3.12.4
CLI Version: 3.12.0
Nitro Version: 2.9.7
Package Manager: [email protected]
Builder: -
User Config: ssr, site, hub, devtools, modules, i18n, css, app, alias, content, compatibilityDate
Runtime Modules: @nuxtjs/[email protected], @nuxt/[email protected], @nuxt/[email protected], @nuxtjs/[email protected], @nuxthub/[email protected]
Build Modules: -

Reproduction

https://stackblitz.com/edit/github-xogbeb?file=pages%2Findex.vue

Describe the bug

Hello.

When loading the website through localhost:3000/ there is no issue. However, if I load the side through localhost:3000/design, I get the error message down below. Strangely enough, if I switch to the /design tab through the nav-bar, no error occurs.

The error seems to be with the with-buttons.vue component.

Things I have tried

searching for invisible unicode characters with bash scripts as well as Visual Studio Code's "Render Whitespaces" functionality
re-creating the .vue file and pasting the code
re-creating the .vue file and typing the code again from scratch

How it works again

If I remove the <style scoped></style> tag, everything works again
If I remove the with-buttons.vue component from my page, everything works again

This issue seems to be quite similar, but didn't help me to resolve my error.

If any information is missing, let me know and I will provide it.

Thank you in advance

Additional context

Error Message

WARN  [Vue Router warn]: uncaught error during route navigation:


ERROR  [vite-node] [plugin:vite:vue] [SyntaxError] PROJECT_FOLDER/components/carousel/with-buttons.vue:1:1 <br><pre>1  |  &lt;template&gt;
   |   ^
2  |    &lt;div class="carousel-with-buttons"&gt;
3  |      &lt;div ref="carousel" class="showcase__carousel"&gt;</pre><br>

|   ^
2  |    &lt;div class="carousel-with-buttons"&gt;
3  |      &lt;div ref="carousel" class="showcase__carousel"&gt;</pre><br>
at PROJECT_FOLDER/components/carousel/with-buttons.vue:1:1
SyntaxError: Error parsing JavaScript expression: Expecting Unicode escape sequence \uXXXX. (2:39)
at createCompilerError (node_modules\@vue\compiler-core\dist\compiler-core.cjs.js:1328:17)
at Object.processExpression (node_modules\@vue\compiler-core\dist\compiler-core.cjs.js:4364:9)
at ssrCodegenTransform (node_modules\@vue\compiler-ssr\dist\compiler-ssr.cjs.js:924:33)
at Object.compile (node_modules\@vue\compiler-ssr\dist\compiler-ssr.cjs.js:1390:3)
at doCompileTemplate (node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js:4286:47)
at Object.compileTemplate (node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js:4228:12)
at compile (/PROJECT_FOLDER/node_modules/@vitejs/plugin-vue/dist/index.mjs:204:35)
at transformTemplateInMain (/PROJECT_FOLDER/node_modules/@vitejs/plugin-vue/dist/index.mjs:185:18)
at genTemplateCode (/PROJECT_FOLDER/node_modules/@vitejs/plugin-vue/dist/index.mjs:2557:12)
at transformMain (/PROJECT_FOLDER/node_modules/@vitejs/plugin-vue/dist/index.mjs:2411:55)

Logs

No response

Aug 25 '24 15:08 Daanieeel

Hey :wave: thanks for the issue !

Without a minimal reproduction, we won't be able to know what's wrong. Would you be able to scope the issue ? I'm not sure but the devtools inspect tab can probably show you which transformation plugin failed.

Aug 25 '24 15:08 huang-julien

Would you be able to provide a reproduction? 🙏

More info

Why do I need to provide a reproduction?

Reproductions make it possible for us to triage and fix issues quickly with a relatively small team. It helps us discover the source of the problem, and also can reveal assumptions you or we might be making.

What will happen?

If you've provided a reproduction, we'll remove the label and try to reproduce the issue. If we can, we'll mark it as a bug and prioritize it based on its severity and how many people we think it might affect.

If needs reproduction labeled issues don't receive any substantial activity (e.g., new comments featuring a reproduction link), we'll close them. That's not because we don't care! At any point, feel free to comment with a reproduction and we'll reopen it.

How can I create a reproduction?

We have a couple of templates for starting with a minimal reproduction:

👉 https://stackblitz.com/github/nuxt/starter/tree/v3-stackblitz 👉 https://codesandbox.io/s/github/nuxt/starter/v3-codesandbox

A public GitHub repository is also perfect. 👌

Please ensure that the reproduction is as minimal as possible. See more details in our guide.

You might also find these other articles interesting and/or helpful:

Aug 25 '24 15:08 github-actions[bot]

Here is the reproduction: https://stackblitz.com/edit/github-xogbeb?file=pages%2Findex.vue I have updated my initial message as well

Aug 25 '24 16:08 Daanieeel

Start a new pull request in StackBlitz Codeflow.

github-xogbeb (Open reproduction)

Aug 25 '24 16:08 bolt-new-by-stackblitz[bot]

When will "needs reproduction" be removed?

Aug 31 '24 18:08 Daanieeel

Curious... i do get the bug but don't see any issue within the inspector

Sep 01 '24 08:09 huang-julien

Here's a minimal reproduction without Nuxt:

https://play.vuejs.org/#__SSR__eNqNksFOAjEQhl9l0pNGBAx6WdFEDYl6QKImXnpZtsNS6LZN210ghHd3touwJoZ4adr55+98M+2WPVjbrUpkCRsGLKxKA95zDTAUsoobAIfWGVFmQRodpV6jDXstBx195qQN4DGUFlSq8zvOgueMVIEzqXHijPVn2/qOLHXiS4owTyCeAcLGYgLjspii6zQhcqWlCgkM+v0Y2sW19j6jzOek/MN80zLvzm9r7oZ0Tx02CsFnxqKoSWXVXDo1TqBL4MquwRslBUxVmi3JDzDfV68up1KLsyMQXABnds1ZXQdg1XTYSos9/8raRaAagqqzDk0sM3om8+7CG03PEmE4y0xhpUL3ZutnoKkeeucsVcqsXmMsuBL3AyDPHLPlH/GFp9oJbSYOPboKOTtoIXU5hkYefYxxTfuDWNA3UJR9QnxHGlYZv0pMeyy1IOxWXqR9KaxxQer804/WAbX/aaoGPT41Z/Q3n060fsQddK+jjybKdt+ze++9

It seems to be a bug with the SSR rendering of @vue/template-compiler. I've raised an issue. Let's track there. 🙏

Sep 02 '24 11:09 danielroe