本地老工程vue2.7.x+webpack4在升级webpack5的时候遇启动和打包报错:
Syntax Error: SyntaxError: /xxxxx.vue Unexpected token, expected "," (1:8)

> 1 | [object Promise]
    |         ^
  2 | export { render, staticRenderFns } 

最后才发现是prettier导致的。

推荐看看stackoverflow上面这个回答。Update Nodejs 14->18 — webpack have the same syntaxError: /…/xxx.vue: Unexpected token, expected “,” (1:8) for ALL Vue 2 components in the project

导致原因:

在prettier v3.0.0中,默认值从es5更改为all

Default value changed from es5 to all in v3.0.0

Print trailing commas wherever possible in multi-line comma-separated syntactic structures. (A single-line array, for example, never gets trailing commas.)

Valid options:

"all" - Trailing commas wherever possible (including function parameters and calls). To run, JavaScript code formatted this way needs an engine that supports ES2017 (Node.js 8+ or a modern browser) or downlevel compilation. This also enables trailing commas in type parameters in TypeScript (supported since TypeScript 2.7 released in January 2018).
"es5" - Trailing commas where valid in ES5 (objects, arrays, etc.). No trailing commas in type parameters in TypeScript.
"none" - No trailing commas.

vue-loader涉及prettier配置项

image.png

解决方法1

prettier插件版本回退到v2.8.8

"prettier":"v2.8.8"
解决方法2

vue-loader配置prettify: false。

   {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          // vue loader在处理.vue模板时编译后不用prettier格式化
          prettify: false,
        },
   },
Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐