本地运行npm start遇chart.js模块解析错误求助

问题根源 #

你遇到的错误是因为Chart.js代码里用了static defaults = {}这种ES类公共静态字段语法，而你的项目Babel配置没支持这个语法，加上默认babel-loader不会转译node_modules里的文件，导致未转译的代码无法被webpack解析。

解决方法 #

1. 让Babel转译Chart.js相关依赖 #

修改webpack配置（如果是Create React App项目，先执行npm run eject或者用craco来修改配置），把chart.js和react-chartjs-2加入babel-loader的处理范围：

module.exports = {
  // ...其他现有配置
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        include: [
          path.resolve(__dirname, 'src'),
          // 新增这两行，让babel处理这两个依赖
          path.resolve(__dirname, 'node_modules/chart.js'),
          path.resolve(__dirname, 'node_modules/react-chartjs-2')
        ],
        use: 'babel-loader'
      }
    ]
  }
};

2. 添加Babel插件支持类静态字段 #

先安装所需插件：

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

然后修改你的.babelrc或babel.config.json配置文件，添加这个插件：

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

3. 降级Chart.js到兼容版本 #

如果上面的方法都没效果，可以试试降级到不使用类静态字段的旧版本：

npm uninstall chart.js react-chartjs-2
npm install chart.js@2.9.4 react-chartjs-2@2.11.2

4. 检查Babel预设的目标环境 #

确保@babel/preset-env的目标配置覆盖了你的运行环境，比如在babel.config.json里指定：

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "chrome": "60",
        "ie": "11"
      }
    }],
    "@babel/preset-react"
  ]
}

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