SyntaxError: /xx.vue: Unexpected token, expected “,“错误解决

 更新时间:2023年08月20日 09:05:27   作者:天渺工作室  
这篇文章主要为大家介绍了SyntaxError: /xx.vue: Unexpected token, expected “,“错误解决方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

错误

本地老工程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.

解决

  • prettier插件版本回退到v2.8.8

"prettier":"v2.8.8"

  • vue-loader配置prettify: false。
{
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          // vue loader在处理.vue模板时默认不用prettier格式化
          prettify: false,
        },
   },

以上就是SyntaxError: /xx.vue: Unexpected token, expected “,“错误解决的详细内容,更多关于SyntaxError vue 解决的资料请关注脚本之家其它相关文章!

相关文章

  • vue-cookies使用方法与vue使用获取cookie实现过程

    vue-cookies使用方法与vue使用获取cookie实现过程

    本文主要介绍了 Vue 中使用 vue-cookies 库的操作方法,包括安装、引入、设置、获取、删除 cookies 等,并针对浏览器存在 cookie 前端却获取不到的问题进行了分析,提出了解决方案
    2026-04-04
  • 深度解析Vue3实现日历组件的五大主流方案

    深度解析Vue3实现日历组件的五大主流方案

    在 Vue3 项目开发中,日历组件是日程管理,预约系统,数据可视化等场景的核心组件,本文将从易用性,扩展性,性能三个维度,深入分析 5 款主流 Vue3 日历组件,并提供选型建议,帮助开发者快速找到适配场景的最佳方案
    2026-04-04
  • vue实现图片滚动的示例代码(类似走马灯效果)

    vue实现图片滚动的示例代码(类似走马灯效果)

    下面小编就为大家分享一篇vue实现图片滚动的示例代码(类似走马灯效果),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • Vue路由对象属性 .meta $route.matched详解

    Vue路由对象属性 .meta $route.matched详解

    今天小编就为大家分享一篇Vue路由对象属性 .meta $route.matched详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue使用echarts时created里拿到的数据无法渲染的解决

    vue使用echarts时created里拿到的数据无法渲染的解决

    这篇文章主要介绍了vue使用echarts时created里拿到的数据无法渲染的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • Vue动画之第三方类库实现动画方式

    Vue动画之第三方类库实现动画方式

    这篇文章主要介绍了Vue动画之第三方类库实现动画方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • Vue强制组件重新渲染的方法讨论

    Vue强制组件重新渲染的方法讨论

    这篇文章给大家详细介绍了Vue强制组件重新渲染的正确方法,非常的实用,有需要的小伙伴可以参考下
    2020-02-02
  • 简单理解Vue中的nextTick方法

    简单理解Vue中的nextTick方法

    本篇文章主要介绍了简单理解Vue中的nextTick方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • vue3数组或对象赋值不更新解决方法示例

    vue3数组或对象赋值不更新解决方法示例

    这篇文章主要为大家介绍了vue3数组或对象赋值不更新解决方法示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-11-11
  • vue3中的 $attrs 与 Attributes 继承

    vue3中的 $attrs 与 Attributes 继承

    这篇文章主要介绍了vue3中的 $attrs 与 Attributes 继承的相关资料,首先介绍了什么是Attributes 继承,结合实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-02-02

最新评论