After upgrading react-scripts to v5, craco start does not work properly. App starts with no error but in browser, there is a blank page and if i open inspector, i only see index.html codes not react codes. It was working well with [email protected]. Here is my local files;

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();

CodePudding user response：

craco's Github readme, states that it is supporting Create React App (CRA) 4.*. By this statement, I'm assuming CRA 5 is not officially supported by craco.

However, this repository utilizes both CRA 5 and craco (but I have not verified that it is working). Use this repository to compare your setup (after verifying that the linked repositry is working), and try different settings/configs to see if you get further.