Chart.js 错误：您可能需要适当的加载程序来处理此文件类型

Question

我目前正在尝试在我的 React 应用程序中使用Chart.js ，但是当我使用 go 构建我的应用程序时，我遇到了这个错误

ERROR in ./node_modules/chart.js/dist/chart.esm.js
Module parse failed: D:\MyApp\node_modules\chart.js\dist\chart.esm.js Unexpected token (6613:12)
You may need an appropriate loader to handle this file type.
|         if (intermediateIndex1 !== startIndex && intermediateIndex1 !== lastIndex) {
|           decimated.push({
|             ...data[intermediateIndex1],
|             x: avgX,
|           });
 @ ./src/imports/Dashboard/Dashboard.js 21:12-31
 @ ./src/App.js
 @ ./src/index.js
 @ multi babel-polyfill ./src/index.js

我尝试在线研究以查看是否有其他人遇到过同样的问题，但我没有运气。

下面是我的 Webpack 配置文件：

const path = require('path');

module.exports = {
    entry: ['babel-polyfill', './src/index.js'],
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js'
  },
  module: {
    rules: [{
      loader: 'babel-loader',
      test: /\.jsx?$/,
      exclude: /node_modules/
    }, {
      test: /\.s?css$/,
      use: [
        'style-loader',
        'css-loader',
        'sass-loader'
      ]
    },{
        test: /\.(jpe?g|png|gif|svg|mp3)$/i,
        loaders: [
            'file-loader?hash=sha512&digest=hex&name=[hash].[ext]',
            'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false'
        ]
    }
    ]
  },
  devtool: 'cheap-module-eval-source-map',
  devServer: {
    contentBase: path.join(__dirname, 'public'),
    historyApiFallback: true
  }
};

这是我的 bablerc 文件

{
    "presets": [
      "env",
      "react",
      "stage-0"
    ],
    "plugins": [
      "transform-class-properties"
    ]
  }

这是我安装的依赖项列表

"dependencies": {
    "@babel/polyfill": "^7.0.0",
    "aws-sdk": "^2.580.0",
    "axios": "^0.19.0",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-loader": "7.1.1",
    "babel-plugin-transform-class-properties": "6.24.1",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "bcryptjs": "^2.4.3",
    "body-parser": "^1.18.2",
    "chart.js": "^3.1.0",
    "core-js": "^2.5.3",
    "css-loader": "0.28.4",
    "express": "latest",
    "file-loader": "^1.1.5",
    "google-maps-react": "^2.0.2",
    "image-webpack-loader": "^3.4.2",
    "immutability-helper": "^2.4.0",
    "jquery": "^3.4.1",
    "jsbarcode": "^3.11.0",
    "jsonwebtoken": "^8.1.0",
    "lodash": "^4.17.14",
    "moment": "^2.22.2",
    "node-sass": "^4.12.0",
    "node-schedule": "^1.3.2",
    "nodemailer": "^4.7.0",
    "normalize.css": "7.0.0",
    "npm": "^6.10.0",
    "papaparse": "^5.1.1",
    "promise-mysql": "^3.1.0",
    "prop-types": "^15.6.0",
    "react": "^16.0.0",
    "react-csv": "^1.0.14",
    "react-dom": "^16.0.0",
    "react-router-dom": "4.2.2",
    "react-scripts": "1.0.14",
    "sass-loader": "6.0.6",
    "socket.io": "^2.0.3",
    "style-loader": "0.18.2",
    "twilio": "^3.24.0",
    "validator": "8.0.0",
    "webpack": "3.1.0",
    "webpack-dev-server": "2.5.1"
  },

我希望错误告诉我需要安装什么加载程序才能与Chart.js一起使用，但它没有指定。 如果有人知道我需要安装哪个加载程序以及我应该将它放在我的文件中的什么位置，那就太棒了。 TIA！

Answer 1

Chart.js 版本 3 不兼容。 将其更改为 ^2.9.4。 和你我一样的问题已经解决了。

Answer 2

我有同样的错误。 我刚刚更新了 babel 依赖项，一些其他的，错误消失了。 但在那之后，您必须更新一些图表属性（例如 horizo horizontalBar到bar并配置了indexAxis选项）。

"@babel/core": "^7.15.8",
"@babel/preset-env": "^7.15.8",
"babel-core": "^7.0.0-bridge.0",

Answer 3

我有一个不同的设置，所以我不确定我使用的修复是否可以在没有额外调整的情况下应用到这里，但由于这是这个错误的最佳搜索引擎匹配，我将分享我的结果，也许它会对某人有所帮助。 应该没有必要坚持使用旧版本的库。

我通过 Laravel Mix in Laravel 6 使用 Webpack，但我的 Mix package 非常旧，所以我要做的第一件事就是将它更新到当前版本（对于 Laravel 6，它是 v5）。 之后我添加了以下 .babelrc 文件：

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "debug": true,
                "modules": false,
                "forceAllTransforms": true,
                "useBuiltIns": "usage",
                "targets": "last 1 version, > 1%"
            }
        ]
    ]
}

我还添加了 Babel polyfill package：

npm install -D @babel/polyfill

之后我可以运行npm run dev而不会出现任何错误。

文件和命令来自这篇文章： https://fostermade.co/blog/laravel-mix-and-es2015-javascript