vue-charts项目初始化报错求助：Module parse failed问题排查解决

错误原因 #

报错里的static defaults = {}属于ES6+的类静态字段语法，当前项目的Babel/Webpack配置未处理该语法，再加上Quasar插件的loader干扰，最终导致代码解析失败。

解决方案 #

• 添加Babel插件支持类静态字段

  1. 安装所需插件：

     npm install @babel/plugin-proposal-class-properties --save-dev
     

  2. 在项目根目录的babel.config.js中配置该插件：

     module.exports = {
       presets: ['@vue/cli-plugin-babel/preset'],
       plugins: ['@babel/plugin-proposal-class-properties']
     }
     

• 让Webpack转译第三方依赖
  在vue.config.js中添加需要转译的依赖包，确保chart.js和vue-charts被正确处理：

  module.exports = {
    transpileDependencies: ['chart.js', 'vue-charts']
  }
  

• 适配Quasar的loader配置
  如果项目使用了Quasar插件，在vue.config.js里把Quasar也加入转译列表，避免loader冲突：

  module.exports = {
    pluginOptions: {
      quasar: {
        importStrategy: 'kebab',
        rtlSupport: false
      }
    },
    transpileDependencies: ['quasar', 'chart.js', 'vue-charts']
  }
  

验证步骤 #

修改配置后，清理旧依赖并重新安装：

rm -rf node_modules package-lock.json
npm install

随后重启项目：

npm run serve

内容的提问来源于stack exchange，提问作者Vinicios