How to modify config of Create React App - without Ejecting!

I'm using Create React App (CRA) for a couple of client projects.
To keep things easier to maintain once the project is handed over I've not ejected.

However today I ran into the common "Hooks + multiple instances of React" issue as I was attempting to consume a component library I had created.

Both this library and the main app were including their own copy of React.

To solve this and prevent the error I needed to do two things:

• Update the library to list React as a peer dependency and then update the bundler (rollup) to not include React in the bundle.

• Add an alias for React to the Webpack config of the main app

The first step was easy, but as you might know, it's not possible to modify the Webpack config of CRA without ejecting it.

Or so I thought...

Turns out you can by using CRACO - which stands for Create React App Configuration Override.

After installing and a quick modification of the package.json scripts, I can now use a craco.config.js file to override the default CRA Webpack config.

const path = require('path')

module.exports = {
  webpack: {
    alias: {
      react: path.resolve(__dirname, './node_modules/react'),
    },
  },
}

For more info on the issue itself and solutions see:
https://github.com/facebook/react/issues/13991