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

【问题标题】：Chart.js Error: You may need an appropriate loader to handle this file typeChart.js 错误：您可能需要适当的加载程序来处理此文件类型
【发布时间】：2021-04-13 19:14:12
【问题描述】：

我目前正在尝试在我的 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 一起使用，但它没有指定。如果有人知道我需要安装哪个加载器以及我应该将它放在我的文件中的哪个位置，那就太棒了。蒂亚！

【问题讨论】：

标签： javascript node.js webpack chart.js

【解决方案1】：

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

【讨论】：

是的，实际上我几天前就想到了这一点，但感谢您的回答。也许它会在未来对其他人有所帮助。
Chart.js 版本 3 与什么不兼容？我遇到了同样的错误，其他两个答案对我不起作用（我没有使用 babel），我真的很想使用 chart.js 版本 3

【解决方案2】：

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

我在 Laravel 6 中通过 Laravel Mix 使用 Webpack，但我的 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

【讨论】：

【解决方案3】：

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

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

【讨论】：