“您可能需要一个额外的加载器来处理这些加载器的结果” - babel 配置可能存在问题

Question

目前正在使用@mui/x-charts，无论我尝试什么，都会遇到相同的错误。我尝试使用 Chart.js 并遇到错误。

./node_modules/@mui/base/Popper/Popper.js 151:27
Module parse failed: Unexpected token (151:27)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|   }
|   const classes = useUtilityClasses();
>   const Root = slots.root ?? 'div';
|   const rootProps = useSlotProps({
|     elementType: Root,

NPM版本

10.2.4

反应

18.3.1

这是我的

package.json

{
  "name": "website",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.13.3",
    "@emotion/styled": "^11.13.0",
    "@mui/x-charts": "^6.18.0",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.7.7",
    "chart.js": "^4.4.4",
    "firebase": "^10.13.1",
    "materialize-css": "^1.0.0-rc.2",
    "moment": "^2.30.1",
    "pako": "^2.1.0",
    "react": "^18.3.1",
    "react-big-calendar": "^1.15.0",
    "react-calendar": "^5.0.0",
    "react-chartjs-2": "^5.2.0",
    "react-dom": "^18.3.1",
    "react-plaid-link": "^3.6.0",
    "react-router-dom": "^6.26.2",
    "react-script": "^2.0.5",
    "react-scripts": "^3.4.4",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ],
  "devDependencies": {
    "@babel/compat-data": "7.19.4",
    "@babel/core": "^7.19.6",
    "@babel/generator": "7.19.6",
    "@babel/helper-compilation-targets": "7.19.3",
    "@babel/helper-create-class-features-plugin": "7.19.0",
    "@babel/helper-module-transforms": "7.19.6",
    "@babel/plugin-proposal-class-properties": "^7.18.6",
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
    "@babel/plugin-proposal-private-methods": "^7.18.6",
    "@babel/plugin-transform-private-property-in-object": "^7.24.7",
    "@babel/preset-env": "^7.26.0",
    "@babel/preset-react": "^7.25.9",
    "customize-cra": "^1.0.0",
    "react-app-rewired": "^2.2.1"
  }
}

已经尝试升级我的 webpack 版本，但收到错误提示要降级。

Answer 1

同问，我也遇到这个问题了。发生这种情况是因为您的设置不支持现代 JS 功能，例如空合并 (??) 和可选链接 (?.)。以下是解决此问题的快速解决方法：

1. Eject CRA – 运行 npm runject 来自定义 Babel 和 Webpack，但请注意，您将使用 .babelrc 自行管理所有配置。
2. 降级@mui/x-charts – 使用适合您当前设置的旧版本。
3. 升级react-scripts – 这将更新 Babel 和 Webpack 以支持现代 JS 功能，而无需降级库。