Source code of my react app is visible in chrome dev tools

When deploying a react app the source tab in chrome dev tools shows my complete react source code and not code from the build directory, how can I prevent this behavior? I only want the code in the build/ directory to be visible, not my entire app!

hi there, welcome.

which site is this regarding?
does it happen when you test locally as well?

This is the website, yes it happens when testing locally.
I’m using netlify CLI for this

$ netlify dev

Also when using the build version of the app, the react components source code is visible from the dev tools knowing that it’s not in the build directory

$ netlify build
$ serve -s build

You can view the source code by opening chrome dev tools Sources tab, on the left side navigate to top > > static > js, there you will find the components directory along with some other configs.

I found the solution, it’s because react-scripts was making source maps to the build director so running the following command fixes the issue

On Mac/Linux run

$ GENERATE_SOURCEMAP=false react-scripts build

On Windows run:

> set GENERATE_SOURCEMAP=false && react-scripts build
1 Like