So You Want CRA With Webpack 5 Support

CRA did not release a new version with Webpack 5 support yet. However, you can still make it work using their wp5 branch work. Just follow the guide below and I'll show you how.

The Recipe

1. Create a CRA project as you normally do npx create-react-app my-wp5-cra --template typescript

2. Create a file named npm-shrinkwrap.json in the project root

//npm-shrinkwrap.json
{
  "dependencies": {
    "react-scripts": {
      "version": "4.0.3",
      "from": "https://gitpkg.now.sh/facebook/create-react-app/packages/react-scripts?wp5",
      "dependencies": {
        "react-dev-utils": {
          "version": "11.0.4",
          "from": "https://gitpkg.now.sh/facebook/create-react-app/packages/react-dev-utils?wp5",
          "dependencies": {
            "react-error-overlay": {
              "version": "6.0.9",
              "from": "https://gitpkg.now.sh/facebook/create-react-app/packages/react-error-overlay?wp5",
              "dependencies": {
                "anser": { "version": "^2.0.1" },
                "cross-env": { "version": "^7.0.3" },
                "fork-ts-checker-webpack-plugin": { "version": "^6.2.10" },
                "raw-loader": { "version": "^4.0.2" },
                "settle-promise": { "version": "^1.0.0" }
              }
            }
          }
        }
      }
    }
  }
}

npm-shrinkwrap is a great tool to override versions of dependencies of dependencies. This will ensure npm installs react-scripts and some of its dependencies from facebook/create-react-app's wp5 branch on GitHub

3. Add following scripts to package.json to be able to start or build using craco

//package.json
{
  //...
  "scripts": {
    //...
    "postinstall": "cd node_modules/react-scripts/node_modules/react-dev-utils/node_modules/react-error-overlay && cross-env NODE_ENV=production node build.js" // <-- Add this line
    //...
  }
  //...
}

Because react-error-overlay needs to be built before we can start our project.

4.Install cross-env by running npm install --save-dev cross-env

cross-env is required to build react-error-overlay.

5. Hit npm install

Conclusion

Thats it! Just hit npm start and you will have the boilerplate CRA app running using Webpack 5. However, please not facebook/create-react-app's WP5 support is a work in progress and there is a chance some stuff will not work as intended. But surely, you can start trying and testing things with this guide.

You can follow the updates on CRA's official WP5 support on this GitHub issue

A guide for enabling Module Federation with CRA without ejecting is on the way!