To disable minification in a React app created with create-react-app (CRA) using npm, you need to modify the build process. However, CRA does not directly expose Webpack configuration without ejecting, but you can still achieve this without ejecting by using the GENERATE_SOURCEMAP environment variable and a custom build script.
Steps to Disable Minification
-
Create a
.envor.env.localFile: In the root of your project, create a file named.envor.env.localif it doesn’t already exist. -
Add the
GENERATE_SOURCEMAPVariable: Add the following line to the.envfile to prevent CRA from minifying your code:GENERATE_SOURCEMAP=falseThis variable instructs the build process to include source maps and can effectively disable minification, making the code more readable.
-
Clean the
distdirectory: The npm build process doesn’t fully clear thedistdirectory so this step is essential.rm -rf ./dist -
Build your project:
To build your React app without minification, run:
npm run build -
Start your project:
The below command may vary so please check your
scriptsproperty inside thepackage.jsonfile.npm run dev
Important Notes
- Source Maps: Disabling minification via
GENERATE_SOURCEMAP=falseincludes source maps, making it easier to debug the code. - Performance: The non-minified code is not optimized for production, so this approach should only be used for debugging.
This method allows you to disable minification without ejecting or modifying CRA’s internal Webpack configuration.