Craco 无法与 react-scripts@5.0.0 一起正常工作

Question

将react-scripts 升级到v5 后，craco start 无法正常工作。应用程序启动没有错误，但在浏览器中，有一个空白页面，如果我打开检查器，我只看到 index.html 代码而不是反应代码。它与 react-scripts@4.0.3 一起工作得很好。这是我的本地文件；

package.json

{
  "name": "test-app",
  "private": true,
  "version": "0.1.0",
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "dependencies": {
    ...
    "@babel/preset-react": "^7.16.7",
    ...
    "@craco/craco": "^6.4.3",
    ...
    "babel-loader": "^8.2.3",
    ...
    "react": "^16.11.0",
    "react-dom": "^16.11.0",
    "react-scripts": "^5.0.0",
    "scriptjs": "^2.5.9",
    "single-spa": "^5.9.0",
    "single-spa-react": "^4.6.1",
  },
  "devDependencies": {
    "@babel/core": "7.7.2",
    "@babel/plugin-proposal-class-properties": "^7.12.1",
    "@babel/plugin-proposal-decorators": "^7.17.2",
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.12.1",
    "@babel/plugin-proposal-optional-chaining": "^7.6.0",
    "@svgr/webpack": "6.2.1",
    "@types/chance": "^1.0.8",
    "@types/jest": "^24.9.0",
    "@types/node": "^16.7.10",
    "@types/react": "^16.9.18",
    "@types/react-dom": "^16.9.5",
    "@types/react-router-dom": "^5.1.3",
    "@types/yargs": "^17.0.2",
    "@typescript-eslint/eslint-plugin": "^4.14.1",
    "@typescript-eslint/parser": "^4.14.1",
    "@webpack-cli/serve": "^1.6.1",
    "compression-webpack-plugin": "^9.2.0",
    "css-loader": "3.2.0",
    "dotenv": "^10.0.0",
    "dotenv-expand": "5.1.0",
    "dotenv-webpack": "^7.1.0",
    "env-path": "^1.0.7",
    "enzyme": "^3.10.0",
    "enzyme-adapter-react-16": "^1.15.1",
    "eslint": "^7.11.0",
    "eslint-config-airbnb": "^18.0.1",
    "eslint-config-airbnb-typescript": "^12.3.1",
    "eslint-config-react-app": "^6.0.0",
    "eslint-config-standard": "^14.1.0",
    "eslint-config-standard-jsx": "^8.1.0",
    "eslint-import-resolver-typescript": "^2.4.0",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-flowtype": "5.2.0",
    "eslint-plugin-import": "^2.20.0",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-react": "^7.22.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "eslint-plugin-standard": "^4.0.1",
    "file-loader": "4.2.0",
    "react-app-rewired": "^2.2.1",
    "react-svg-loader": "^3.0.3",
    "react-test-renderer": "^16.11.0",
    "sass-loader": "8.0.0",
    "style-loader": "1.0.0",
    "systemjs-webpack-interop": "^2.3.7",
    "terser-webpack-plugin": "5.3.1",
    "tsconfig-paths-webpack-plugin": "^3.5.1",
    "url-loader": "2.2.0",
    "webpack": "^5.69.1",
    "webpack-cli": "^4.9.2",
    "webpack-manifest-plugin": "4.1.1",
    "workbox-webpack-plugin": "6.4.2",
    "yargs": "^17.1.1"
  },
  "scripts": {
    "version": "node scripts/version.js",
    "solid": "node scripts/solid.js",
    "start": "craco start",
    "build": "craco build"
  },
  "typings": "./src"
}

craco.config.ts

   export default {
      mode: 'development',
      babel: {
        plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]],
      },
      eslint: {
        enable: false,
      },
      webpack: {
        configure: (webpackConfig) => {
          // add this line
          // use System
          webpackConfig.output.libraryTarget = 'system';
          delete webpackConfig.optimization;

          webpackConfig.externals = [
            'react',
            'react-dom',
            'single-spa',
            'react-router',
            'react-router-dom',
            '@mf-experiences',
          ];

          return webpackConfig;
        },
      },
      // Adding Server
      devServer: (devServerConfig) => {
        devServerConfig.proxy = {
          '@mf-experiences': {
            target: 'path...',
            secure: false,
            changeOrigin: true,
          },
        };

        return devServerConfig;
      },
    };

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './styles/nullifier.scss';
import './styles/index.scss';
import './tracking/facebook.ts';
import App from './App';
import * as serviceWorkerRegistration from './serviceWorkerRegistration';

const setRealVh = () => {
  document.documentElement.style.setProperty(
    '--vh',
    `${window.innerHeight * 0.01}px`
  );
};
window.addEventListener('resize', setRealVh);
document.documentElement.style.setProperty('--intensity', `${768 * 0.005}px`);

ReactDOM.render(<App />, document.getElementById('root'));


// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://cra.link/PWA
// serviceWorkerRegistration.register({
//   onUpdate: (registration) => registration.waiting.postMessage({ type: 'SKIP_WAITING' }),
// });
serviceWorkerRegistration.unregister();

Answer 1

craco's Github readme，表示支持Create React App (CRA) 4.*。通过此声明，我假设 CRA 5 未得到 craco 的官方支持。

但是，this repository 同时使用了 CRA 5 和 craco（但我尚未验证它是否有效）。使用此存储库比较您的设置（在验证链接的存储库正常工作后），并尝试不同的 settings/configs 以查看您是否更进一步。

Answer 2

它目前作为一个单独的分支可用：

https://github.com/gsoft-inc/craco/tree/support-cra5

npm 上也发布了一个版本：

"@craco/craco": "^7.0.0-alpha.3"

但请注意，他们正在寻找维护者： https://github.com/gsoft-inc/craco/issues/415

Craco 无法与 react-scripts@5.0.0 一起正常工作

Craco does not work properly with react-scripts@5.0.0

reactjs

webpack

react-scripts

craco