我将我的Vue 2项目中的Nodejs版本从14更新到18（16有相同的问题）。刚开始还不错。但是，在上个月的某个时候，当我决定清理Docker缓存，镜像，容器和卷-并重建Docker容器-然后它开始产生“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)
...我对所有Vue组件都有同样的错误。
大多数Vue组件都是非常标准的，例如，404.vue甚至是空的：
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({});
</script>我的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"
]
}我发现这可能是vue-loader的一个问题：https://stackoverflow.com/a/74718715/2044408
vue-loader 16+与vue 2.x不兼容所以你需要使用vue-loader 15.x
因此，我试图明确定义：
"dependencies": {
...
"vue-loader": "^15.10.1",
...
}但无论如何，我总是在package-lock.json中看到vue-loader v17：
"node_modules/@vue/cli-service": {
"version": "5.0.8",
...
"dependencies": {
...
"vue-loader": "^17.0.0",
...
}
}我尝试在package.json文件中覆盖它：
"overrides": {
"@vue/cli-service": {
"vue-loader": "^15.10.1"
}
},好像不管用。但我没有设法完全改变vue-loader版本17 -> 15。
我还尝试恢复2个月前的代码状态（完全清理Docker的东西）-错误现在是粘性的。注册表会出问题吗？
我不知道是什么也不知道怎么解决。
UPD：我发现，如果我尝试创建一个全新的Vue 2（TS，Webpack）项目，那么在添加Eslint+Prettier包后，我会遇到同样的问题：
"eslint-config-prettier": "^9.0.0",
"eslint-plugin-prettier": "^5.0.0",
"prettier": "^3.0.1",
2条答案
按热度按时间7fhtutme1#
经过几天的研究和测试，我找到了解决方案：
我刚刚将Prettier包添加到
devDependencies：ldioqlga2#
trailingComma的默认行为在pretteir 3中已经改变，所以这是效果。https://prettier.io/docs/en/options.html#trailing-commas
在v3.0.0中，默认值从es 5更改为all
Vue-loader在编译时默认使用prettier自动格式化，但您可以选择关闭该行为。
下面是一个
webpack.mix.js的例子。