ReactJS Source Map : Hiding Source Code From Browser Console

When we deploy React Apps in production environment using npm run build which will generate an optimised production build. The browser shows source code of all the components when we go to Source tab in browser inspector window. In Google chrome browser in you go to Inspector window and enter cntr+p or cmd+p (in mac) you can see all components code.

This is very important because once you release your react application to production, it will show all your production code in browser console

Solution:

To hide source code being exposed to outside world just enable GENERATE_SOURCEMAP = false in package.json file as follows.

scripts: {
"build": "GENERATE_SOURCEMAP=false react-scripts build"
}

Reference: https://github.com/facebook/create-react-app/issues/4162