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

Chart.js Error: You may need an appropriate loader to handle this file type(Chart.js错误：您可能需要适当的加载器来处理此文件类型)

问题描述

我当前正尝试在Reaction应用程序中使用Chart.js，但在构建应用程序时出现此错误

ERROR in ./node_modules/chart.js/dist/chart.esm.js
Module parse failed: D:MyApp
ode_moduleschart.jsdistchart.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！

推荐答案

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

这篇关于Chart.js错误：您可能需要适当的加载器来处理此文件类型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！