loading...

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

kildareflare profile image Rich Field ・1 min read

I'm using Create React App 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 now, 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 to 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

Posted on Feb 21 by:

kildareflare profile

Rich Field

@kildareflare

Full stack remote dev that prefers the front end. I build web applications for NPOs and businesses large and small.

Discussion

markdown guide
 

Thanks for sharing. I'm new to this eco system of config. My create-react-app is typescript, but i do have some shared code from react-native mainly for services which has both .js & .ts files. So I have .eslint.rc to configure the .js files and for .ts files I have .tsconfig.json to do so. I'm having the same issue trying to access the alias path from App.tsx where it throws "Module not found.." I've raised an issue here . github.com/facebook/create-react-a.... Can you please check and Kindly advise as i'm in a dire need to solve this at the earliest.