Error parsing JavaScript expression: Expecting Unicode escape sequence \uXXXX

[Daanieeel]

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

[huang-julien]

Hey 👋 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.

[github-actions]

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:

• The Importance of Reproductions
• How to Generate a Minimal, Complete, and Verifiable Example

[Daanieeel]

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

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• github-xogbeb (Open reproduction)

[Daanieeel]

When will "needs reproduction" be removed?

[huang-julien]

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

[danielroe]

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. 🙏