Chart.js错误: 您可能需要一个适当的加载器来处理此文件类型。

Question

我目前正在尝试在我的React应用程序中使用Chart.js，但在构建应用程序时，我遇到了以下错误：

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一起使用，但它没有说明。如果有人知道我需要安装哪个加载器以及在我的文件中应该放在哪里，那就太棒了。先谢谢！

- Michael

Answer 1

Chart.js 版本 3 不兼容，需要改为^2.9.4版本。和你我一样的问题已经解决。

- kiki_chen

---

是的，我几天前就已经弄清楚了，但还是感谢你的回答。也许将来会帮助其他人。 - Michael

Chart.js版本3与哪些内容不兼容？我遇到了同样的错误，另外两个答案对我没有作用（我没有使用babel），我真的很想使用chart.js版本3。 - davidshere

@davidshere 你弄清楚要用哪个版本了吗？我在处理这些错误的过程中遇到了困难。 - Sibulele

版本4兼容吗？ - jay rangras

Answer 2

我遇到了相同的错误。我刚刚更新了babel依赖项和其他一些内容，然后错误消失了。但在此之后，您需要更新某些图表属性（例如horizontalBar更改为bar并使用indexAxis选项进行配置）。

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

- Sergio

Answer 3

我的设置与此不同，因此我不确定我使用的修复程序是否可以在此处应用而不需要其他调整，但由于这是此错误的最佳搜索引擎匹配，我将分享我的结果，也许它会帮助某人。没有必要坚持使用旧版本的库。

我正在使用 Laravel 6 中的 Webpack 通过 Laravel Mix，但我的 Mix 包非常旧，所以我首先必须将其更新到当前版本（对于 Laravel 6，它是 v5）。之后，我添加了以下 .babelrc 文件：

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

我还添加了Babel polyfill包：

npm install -D @babel/polyfill

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

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

- Rafał G.