Electron+React项目引入react-chartjs-2时的Webpack加载错误问题

数据老陈

2026-8-4

问题解决：Electron+React中引入react-chartjs-2的编译错误

问题根源

第一个编译错误是因为chart.js源码里用到了类静态属性（static defaults = {}）这类ES6+语法，你的Webpack配置里babel-loader排除了所有node_modules目录，导致Babel没有转译chart.js和react-chartjs-2的代码，Webpack无法识别这些语法。

你尝试安装cjs-loader的思路有误，这个Loader本身使用了ES模块的import语法，在CommonJS环境下运行自然会报错。

修复步骤

修改webpack.common.js中的Babel-loader规则，把chart.js和react-chartjs-2从排除列表中移除，让Babel处理这两个依赖：

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/js/index.js',
  devtool: 'inline-source-map',
  target: 'electron-renderer',
  module: {
    rules: [
      {
        test: /\.js$/,
        // 排除node_modules，但保留chart.js和react-chartjs-2
        exclude: /node_modules\/(?!(chart.js|react-chartjs-2)\/)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [[
              '@babel/preset-env', {
                targets: {
                  esmodules: true
                }
              }],
              '@babel/preset-react']
          }
        }
      },
      {
        test: [/\.s[ac]ss$/i, /\.css$/i],
        use: [
          'style-loader',
          'css-loader',
          'sass-loader',
        ],
      }
    ]
  },
  resolve: {
    extensions: ['.js'],
  },
  output: {
    filename: 'app.js',
    path: path.resolve(__dirname, 'build', 'js'),
  },
};