I updated Nodejs version on my Vue 2 project from 14 to 18 (16 has the same issue). It was fine in the beginning. But, at some point in the last month when I decided to clean up Docker caches, images, containers, and volumes — and, rebuild Docker containers — then it started to produce the "SyntaxError":
ERROR in ./src/views/404.vue?vue&type=template&id=6b3aeb0e& (./node_modules/vuetify-loader/lib/loader.js??ruleSet[1].rules[0].use!./node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[5]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/views/404.vue?vue&type=template&id=6b3aeb0e&)
Module build failed (from ./node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib/index.js):
SyntaxError: /opt/application/src/views/404.vue: Unexpected token, expected "," (1:8)
> 1 | [object Promise]
| ^
2 | export { render, staticRenderFns }
at instantiate (/Users/dmitrydudin/harlem/chat-home-base/ui/node_modules/@babel/parser/lib/index.js:63:32)
at constructor (/Users/dmitrydudin/harlem/chat-home-base/ui/node_modules/@babel/parser/lib/index.js:358:12)
at JSXParserMixin.raise (/Users/dmitrydudin/harlem/chat-home-base/ui/node_modules/@babel/parser/lib/index.js:3207:19)
at JSXParserMixin.unexpected (/Users/dmitrydudin/harlem/chat-home-base/ui/node_modules/@babel/parser/lib/index.js:3237:16)
...
I have the same error for absolutely all Vue components.
Most Vue components are pretty standard, for example, 404.vue is even empty:
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({});
</script>
My package.json:
{
"name": "ui",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
...
},
"dependencies": {
"@babel/runtime": "^7.22.10",
"@lottiefiles/lottie-player": "^1.7.1",
"@mdi/font": "^5.3.45",
"@types/debounce": "^1.2.0",
"@types/intl": "^1.2.0",
"@types/lodash": "^4.14.168",
"@types/pluralize": "0.0.29",
"@types/socket.io-client": "^1.4.33",
"@web-types/vuetify": "^2.0.15-1",
"axios": "^1.4.0",
"axios-retry": "^3.6.0",
"core-js": "^3.32.0",
"dayjs": "^1.11.9",
"debounce": "^1.2.1",
"emoji-mart-vue-fast": "6.1.1",
"emoji-regex": "^9.2.2",
"firebase": "^9.23.0",
"firebase-tools": "^11.30.0",
"flush-promises": "^1.0.2",
"grapheme-splitter": "^1.0.4",
"lodash": "^4.17.21",
"pluralize": "^8.0.0",
"qs": "^6.11.2",
"resize-observer": "^1.0.4",
"socket.io-client": "^4.7.2",
"stackdriver-errors-js": "^0.8.0",
"ts-loader": "^9.4.4",
"ts-node": "^10.9.1",
"ts-node-dev": "^2.0.0",
"v-calendar": "^2.3.0",
"vue": "^2.7.14",
"vue-class-component": "^7.2.6",
"vue-easy-lightbox": "^0.14.1",
"vue-flagpack": "^1.0.1",
"vue-gravatar": "^1.3.1",
"vue-hotjar": "^1.4.0",
"vue-meta": "^2.4.0",
"vue-property-decorator": "^8.4.2",
"vue-router": "^3.4.9",
"vue-sanitize": "^0.2.2",
"vue-socket.io-extended": "^4.2.0",
"vue2-timepicker": "^1.1.6",
"vue-loader": "^15.10.1",
"vuetify": "^2.3.23",
"vuex": "^3.6.2",
"webpack": "^5.88.2"
},
"devDependencies": {
"@testing-library/jest-dom": "^5.11.8",
"@types/jest": "^27.0.0",
"@types/node": "^18.14.6",
"@types/qs": "^6.9.6",
"@types/resize-observer-browser": "^0.1.7",
"@typescript-eslint/eslint-plugin": "^5.59.11",
"@typescript-eslint/parser": "^5.59.11",
"@vue/cli-plugin-babel": "~5.0.8",
"@vue/cli-plugin-eslint": "~5.0.8",
"@vue/cli-plugin-router": "~5.0.8",
"@vue/cli-plugin-typescript": "^5.0.8",
"@vue/cli-plugin-unit-jest": "~5.0.8",
"@vue/cli-plugin-vuex": "~5.0.8",
"@vue/cli-service": "^5.0.8",
"@vue/eslint-config-typescript": "^11.0.3",
"@vue/test-utils": "^1.0.3",
"@vue/vue2-jest": "^27.0.0",
"babel-jest": "^27.5.1",
"babel-loader": "^9.1.2",
"babel-plugin-transform-require-context": "^0.1.1",
"caniuse-lite": "^1.0.30001328",
"eslint": "8.42.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-cypress": "^2.11.2",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-vue": "^9.14.1",
"http-request": "^0.7.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^27.1.0",
"jest-junit": "^12.0.0",
"prettier-eslint": "^11.0.0",
"process": "^0.11.10",
"sass": "~1.32.12",
"sass-loader": "^8.0.2",
"ts-jest": "^27.1.5",
"typescript": "4.4.4",
"vue-cli-plugin-vuetify": "^2.0.5",
"vue-template-compiler": "^2.6.11",
"vuepress": "^1.7.1",
"vuetify-loader": "^1.3.0",
"vuex-class": "^0.3.2",
"vuex-module-decorators": "^0.17.0"
},
"overrides": {
"@vue/cli-service": {
"vue-loader": "^15.10.1"
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
],
"presets": [
"@babel/preset-env"
]
}
I found that it can be an issue with vue-loader here: https://stackoverflow.com/a/74718715/2044408
vue-loader 16+ isn't compatible with vue 2.x ... So you need to use vue-loader 15.x
Thus, I tried to explicitly define:
"dependencies": {
...
"vue-loader": "^15.10.1",
...
}
But anyway, I always see vue-loader v17 in package-lock.json:
"node_modules/@vue/cli-service": {
"version": "5.0.8",
...
"dependencies": {
...
"vue-loader": "^17.0.0",
...
}
}
I tried to override it in the package.json file:
"overrides": {
"@vue/cli-service": {
"vue-loader": "^15.10.1"
}
},
It seems not working.
But I didn't manage to completely change vue-loader version 17 -> 15.
I also tried to revert the code state of 2 months ago (with full cleaning Docker things) — the error is sticky now. Can something happen with the registry?
I can't manage to figure out what it is and how to fix this...
UPD: I found that if I try to create a completely fresh Vue 2 (TS, Webpack) project — then I have the same issue after I add Eslint+Prettier packages:
"eslint-config-prettier": "^9.0.0",
"eslint-plugin-prettier": "^5.0.0",
"prettier": "^3.0.1",
I found the solution after a couple of days of research and tests:
I just added the Prettier package to
devDependencies: