重现步骤：
使用“npm install @mui/x-charts”安装没有问题。 但是当我尝试使用 [BarChart] 时
import { BarChart } from '@mui/x-charts/BarChart';(6:5) start value has mixed support, consider using flex-start instead
Failed to compile.
./node_modules/@react-spring/core/dist/react-spring_core.legacy-esm.js 106:11
Module parse failed: Unexpected token (106:11)
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.
| }
| function detachRefs(ctrl, ref) {
> ctrl.ref?.delete(ctrl);
| ref?.delete(ctrl);
| }
我的 package.json 看起来像：
{
"name": "application",
"version": "0.1.0",
"private": true,
"dependencies": {
"@date-io/date-fns": "^1.3.13",
"@emotion/react": "^11.4.1",
"@emotion/styled": "^11.3.0",
"@material-ui/lab": "^4.0.0-alpha.56",
"@mui/icons-material": "^5.10.9",
"@mui/x-charts": "^6.19.5",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"axios": "^0.19.2",
"immutability-helper": "^3.1.1",
"material-ui-dropzone": "^3.5.0",
"print-js": "^1.2.0",
"react": "^17.0.0",
"react-circular-progressbar": "^2.0.3",
"react-dnd": "^11.1.3",
"react-dnd-html5-backend": "^11.1.3",
"react-dom": "^17.0.0",
"react-pdf": "^5.0.0",
"react-qr-code": "^2.0.2",
"react-router-dom": "^5.2.0",
"react-script-tag": "^1.1.2",
"react-scripts": "^3.4.3",
"react-to-print": "^2.14.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"make-pretty-jsx": "prettier --write \"**/*.{css,js,json,jsx,md}\" \"!package*.json\" \"!build/**/*\" \"!dist/**/*\"",
"make-pretty-css": "prettier-stylelint --write \"**/*.css\" \"!package*.json\"",
"make-everything-pretty": "npm run make-pretty-jsx",
"lint-everything": "lerna run --concurrency 1 --stream lint:quiet",
"lint-everything:fix": "lerna run --concurrency 1 --stream lint:fix",
"precommit": "lint-staged"
},
"eslintConfig": {
"extends": "react-app"
},
"lint-staged": {
"linters": {
"*.{js,jsx}": [
"prettier --write",
"eslint --quiet",
"git add"
],
"*.{json,md}": [
"prettier --write",
"git add"
],
"*.css": [
"prettier-stylelint --write",
"stylelint",
"git add"
]
},
"ignore": [
"**/flow-typed/**/*",
"**/build/**/*",
"package*.json",
"README.md"
]
},
"husky": {
"hooks": {
"pre-commit": "lerna run --concurrency 1 --stream precommit"
}
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@babel/core": "^7.12.3",
"@babel/plugin-proposal-class-properties": "^7.12.1",
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.12.1",
"@babel/plugin-proposal-optional-chaining": "^7.12.1",
"@babel/plugin-transform-react-constant-elements": "^7.12.1",
"@babel/plugin-transform-runtime": "^7.12.1",
"@material-ui/core": "^4.9.9",
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "^4.0.0-alpha.56",
"@material-ui/pickers": "^3.2.10",
"@mui/material": "^5.9.0",
"@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
"@react-pdf/renderer": "^1.6.11",
"babel-eslint": "^10.1.0",
"babel-plugin-hoist-facc": "^0.2.3",
"babel-plugin-minify-constant-folding": "^0.5.0",
"babel-plugin-react-css-modules": "^5.2.6",
"babel-preset-react-app": "^10.0.0",
"bootstrap": "^4.4.1",
"bson-objectid": "^1.3.1",
"copy-to-clipboard": "^3.3.1",
"cross-env": "^7.0.2",
"css-loader": "^5.0.1",
"env-cmd": "^10.1.0",
"eslint": "^6.6.0",
"eslint-config-prettier": "^6.15.0",
"eslint-config-react-app": "^6.0.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.21.5",
"eslint-plugin-react-hooks": "^4.2.0",
"eslint-plugin-unicorn": "^23.0.0",
"husky": "^4.2.5",
"lerna": "^3.22.1",
"lint-staged": "^10.2.2",
"material-ui": "^0.20.2",
"optimize-css-assets-webpack-plugin": "^5.0.4",
"password-generator": "^2.3.2",
"postcss": "^8.1.7",
"postcss-load": "^0.1.6",
"postcss-loader": "^4.0.4",
"postcss-modules-values": "^4.0.0",
"prettier": "^2.0.5",
"prettier-stylelint": "^0.4.2",
"prop-types": "^15.7.2",
"react-datepicker": "^3.2.2",
"react-material-ui-datatable": "^2.0.0-alpha.30",
"react-redux": "^7.2.0",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"redux": "^4.0.5",
"redux-devtools": "^3.5.0",
"redux-persist": "^6.0.0",
"redux-saga": "^1.1.3",
"reselect": "^4.0.0",
"sockjs-client": "^1.4.0",
"stompjs": "^2.3.3",
"stylelint": "^13.7.2",
"stylelint-config-css-modules": "^2.2.0",
"stylelint-config-prettier": "^8.0.2",
"stylelint-prettier": "^1.1.2",
"uuid": "^7.0.3"
}
}
根据文档，这个应该可以工作。
有人知道这个问题的原因以及如何解决吗？
非常感谢！
将 Webpack 4 升级到 Webpack 5 可以解决这个问题，就我而言，我必须将react-scripts 4升级到react-scripts 5。