Error parsing JavaScript expression: Unexpected token, expected
[plugin:unplugin-vue-i18n:directive] Error parsing JavaScript expression: Unexpected token, expected "," (3:16)
/Users/x/Development/frontend/components/settings/AccountingSettings.vue
at createCompilerError (/Users/x/Development/frontend/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:1364:17)
at emitError (/Users/x/Development/frontend/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:2949:5)
at createExp (/Users/x/Development/frontend/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:2942:7)
at Object.onattribend (/Users/x/Development/frontend/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:2459:29)
at Tokenizer.handleInAttrValue (/Users/x/Development/frontend/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:945:16)
at Tokenizer.stateInAttrValueDoubleQuotes (/Users/x/Development/frontend/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:955:10)
at Tokenizer.parse (/Users/x/Development/frontend/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:1099:16)
at Object.baseParse (/Users/x/Development/frontend/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:2988:13)
at Object.parse (/Users/x/Development/frontend/node_modules/@vue/compiler-dom/dist/compiler-dom.cjs.js:904:23)
at Object.parse$1 [as parse] (/Users/x/Development/frontend/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:1794:24
Also have this in the console:
AccountingSettings.vue:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
I did may scans and cannot find what is going on. The error occors in 5 components and not in may others.
Really weird behaviour.
3 Replies
Hi @Shintaii. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Based on the error message and details you've provided, it appears you're encountering an issue related to parsing JavaScript expressions in your Vue components, specifically with the i18n plugin. This error is commonly associated with syntax errors in your component's template or script section. Let's break down the problem and suggest some solutions:
1. Parsing Error:
The error message indicates that there's an unexpected token where a comma was expected. This could be due to a syntax error in your component's template, particularly in an i18n-related directive or expression.
2. Module Loading Error:
The console error about failing to load a module script suggests there might be an issue with how your files are being served or how the build process is handling your components.
To address these issues, here are some steps you can take:
1. Check your i18n expressions:
Review the
AccountingSettings.vue file and other affected components. Look for any i18n-related expressions (like $t() or v-t directives) and ensure they are correctly formatted. Pay special attention to the syntax, making sure all parentheses and quotes are properly closed.
2. Verify your i18n configuration:
Make sure your i18n setup in the Nuxt configuration is correct. According to the Nuxt i18n documentation, you should have something like this in your nuxt.config.ts:
3. Check for TypeScript-related issues:
If you're using TypeScript (.tsx files), there might be a conflict between TypeScript and i18n. As mentioned in this Github issue, there can be conflicts between tsx and i18n. Try changing <script setup lang="tsx"> to <script setup lang="ts"> if applicable.
4. Verify your build process:
The module loading error suggests there might be an issue with how your files are being served. Make sure your development server is running correctly and that there are no issues with your build process.
5. Clear cache and dependencies:
Sometimes, clearing your cache and reinstalling dependencies can resolve unexpected issues:
- Delete the .nuxt folder
- Clear your browser cache
- Run npm clean-install (or yarn install --force if using Yarn)
6. Update dependencies:
Ensure all your dependencies, especially Nuxt and the i18n module, are up to date.
If the issue persists after trying these steps, you may need to provide more specific code snippets from the affected components, particularly the areas using i18n expressions. This would allow for a more detailed analysis of the syntax causing the error.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@231332329233186816> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
I tried all of that
For the record when somene searches for this.
The issue was a multi-line 'action' on an event hook.
@input="
element.value_param = null
element.field_value_param = null
element.use_param = null
element.action_param = null
"