craco与react-scripts@^5.0.1兼容问题及编译报错求助

执行 yarn start 时编译失败，报错信息如下：

yarn start                                                          ✔  27s 
yarn run v1.22.19
$ craco start
Failed to compile.

For the selected environment is no default script chunk format available:
JSONP Array push can be chosen when 'document' or 'importScripts' is available.
CommonJs exports can be chosen when 'require' or node builtins are available.
Make sure that your 'browserslist' includes only platforms that support these features or select an appropriate 'target' to allow selecting a chunk format by default. Alternatively, specify the 'output.chunkFormat' directly.

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

我的 package.json 配置如下：

{
  "name": "fly-with-zoki",
  "version": "1.10.0",
  "private": true,
  "main": "dist/index.js",
  "dependencies": {
    "@babel/helper-define-polyfill-provider": "^0.3.2",
    "@date-io/date-fns": "^1.3.13",
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@fontsource/roboto": "^4.5.8",
    "@material-ui/core": "^4.12.4",
    "@material-ui/icons": "4.11.2",
    "@material-ui/lab": "^4.0.0-alpha.61",
    "@material-ui/pickers": "^3.3.10",
    "@mui/icons-material": "^5.10.16",
    "@mui/lab": "^5.0.0-alpha.114",
    "@mui/material": "^5.10.17",
    "@mui/styled-engine-sc": "^5.10.16",
    "@reduxjs/toolkit": "^1.8.0",
    "@stripe/react-stripe-js": "^1.8.0-0",
    "@stripe/stripe-js": "^1.29.0",
    "@types/dotenv": "^8.2.0",
    "amadeus": "^7.1.0",
    "axios": "^0.27.1",
    "bootstrap": "^4.6.1",
    "chartist": "0.10.1",
    "classnames": "2.3.1",
    "date-fns": "^2.28.0",
    "dom-lib": "^3.1.5",
    "font-awesome": "^4.7.0",
    "history": "5.0.0",
    "jquery": "^3.6.0",
    "json-schema-to-typescript": "^11.0.2",
    "lib": "^4.3.3",
    "material-ui-dropzone": "^3.5.0",
    "moment": "^2.29.3",
    "node": "^16.13.0",
    "notistack": "^1.0.10",
    "perfect-scrollbar": "1.5.1",
    "popper.js": "^1.16.1",
    "prop-types": "15.7.2",
    "react": "^18.2.0",
    "react-chartist": "0.14.4",
    "react-dom": "17.0.2",
    "react-image-gallery": "^1.2.8",
    "react-moment": "^1.1.2",
    "react-redux": "^7.2.8",
    "react-responsive-carousel": "^3.2.23",
    "react-router-dom": "5.2.0",
    "react-scripts": "^5.0.1",
    "react-select": "^5.3.2",
    "react-swipeable-views": "^0.14.0",
    "redux": "^4.1.2",
    "redux-devtools-extension": "^2.13.9",
    "redux-persist": "^6.0.0",
    "redux-thunk": "^2.4.1",
    "styled-components": "^5.3.6"
  },
  "scripts": {
    "lint": "eslint src",
    "dev": "cross-env NODE_OPTIONS= next dev",
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject",
    "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start",
    "lint:check": "eslint . --ext=js,jsx;  exit 0",
    "lint:fix": "eslint . --ext=js,jsx --fix;  exit 0",
    "build-package-css": "cp src/assets/css/material-dashboard-react.css dist/material-dashboard-react.css",
    "build-package": "npm run build-package-css && babel src --out-dir dist"
  },
  "keywords": [],
  "optionalDependencies": {
    "@babel/core": "7.14.0",
    "typescript": "4.2.4"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.19.1",
    "@babel/preset-react": "^7.18.6",
    "@craco/craco": "^7.0.0",
    "autoprefixer": "^10.4.13",
    "eslint-plugin-react": "^7.31.11",
    "eslint-plugin-react-hooks": "^4.6.0",
    "gulp": "4.0.2",
    "gulp-append-prepend": "1.0.9",
    "postcss": "^8.4.21",
    "react-error-overlay": "6.0.9",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": []
  },
  "resolutions": {
    "react-error-overlay": "6.0.9"
  }
}

我尝试过以下命令升级 react-scripts，但没有效果：

npm ugdate react-scripts 
npm upgrade react-scripts 
yarn update react-scripts  
yarn upgrade react-scripts 

解决方案 #

1. 修复 browserslist 配置

报错核心原因是 development 环境的 browserslist 为空，导致webpack无法确定目标环境的chunk格式。修改 package.json 中的 browserslist：

"browserslist": {
  "production": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ],
  "development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version"
  ]
}

2. 锁定 craco 版本兼容性

@craco/craco@7.0.0 官方支持 react-scripts@5.x，但如果仍有问题，可尝试降级到兼容更稳定的 @craco/craco@6.4.5：

yarn add @craco/craco@6.4.5 --dev

3. 清理依赖缓存并重新安装

执行以下命令彻底清理依赖：

rm -rf node_modules yarn.lock package-lock.json
yarn install

4. 手动指定 webpack chunkFormat（备选方案）

若上述方法无效，在 craco.config.js 中添加webpack配置直接指定chunk格式：

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      webpackConfig.output.chunkFormat = 'jsonp';
      return webpackConfig;
    },
  },
};

内容的提问来源于stack exchange，提问作者Hayaz