Disable code splitting in Create React App without ejecting

I wrote this post for people who, like me, want to disable code splitting in Create React App. The beauty of this approach is that you don't need to eject – although if you already have, that's fine too.

My use case was fairly simple: I wanted Create React App's build process to output a main.js and main.css file that I could reference inside my Chrome extension. I've heard that others prefer this approach to build apps inside WordPress and other tools, as well.

This post combines several of the answers from a popular Create React App issue on GitHub to create the cleanest, most comprehensive approach. It also solves the permission issues you may have gotten if you tried to follow that post yourself!

This is how to disable code splitting inside Create React App:

1. In the root directory of your project, create a scripts folder.

2. Inside that folder, create a file called build-non-split.js.

3. Inside that file, add the following code to tweak the build process:

   const rewire = require('rewire')
   const defaults = rewire('react-scripts/scripts/build.js') // If you ejected, use this instead: const defaults = rewire('./build.js')
   let config = defaults.__get__('config')
   
   config.optimization.splitChunks = {
   	cacheGroups: {
   		default: false
   	}
   }
   
   config.optimization.runtimeChunk = false
   

4. Add the rewire module to your project with npm i rewire.

5. Inside package.json, change the build script to reference your file from Step 2:

   // Change the line from this:
   "build": "react-scripts build",
   
   // To this:
   "build": "node ./scripts/build-non-split.js",
   

6. At this point, you can try running npm run build from your project's root directory. If it doesn't work, you may have a permission issue. To correct this, open your terminal and cd into your project. Then, cd into the scripts folder and use chmod 777 on the build-non-split.js file:

   cd scripts # The folder you created in Step 1
   chmod 777 build-non-split.js
   

7. Now you can run npm run build to build your project. Like usual, it will create a build folder, and you can find your assets at something like build/static/js/main.00455bcf.js and build/static/css/main.b100e6da.css respectively.

8. Those names are pretty ugly. If you want to rename them to something cleaner, you can add the following code to the end of build-non-split.js:

   // Renames main.00455bcf.js to main.js
   config.output.filename = 'static/js/[name].js'
   
   // Renames main.b100e6da.css to main.css
   config.plugins[5].options.filename = 'static/css/[name].css'
   config.plugins[5].options.moduleFilename = () => 'static/css/main.css'
   

   Alternatively to Step 8, you could adjust your build script inside package.json. Props to tbillington on GitHub for this answer:

   // Remove this line:
   "build": "node ./scripts/build-non-split.js",
   
   // And replace it with this:
   "build": "node ./scripts/build-non-split.js && npm run build:clean",
   "build:clean": "cd build && mv static/js/*.js main.js && mv static/css/*.css main.css && rm -r static",
   

9. Finally, run npm run build and your application will be built into clean files.

And there you have it: you've disabled code splitting in Create React App without ejecting. Personally, I wish they'd support this out of the box with a different build script: npm run build:nosplit would be nice for those of us using React in unconventional environments. But hey, I only spent an afternoon pulling my hair out, and hopefully you won't need to since you have this post.