create-react-app is showing all my code in production, how to hide it?

Question

In my chrome sources tab, I am able to view all my files by exact folder location. How can I hide them?

These weren\'t the problem in my previous project, w

Answer 1

It seems to be correct behaviour in create-react-app according to Issue #1632.

Gaeron:

This is expected. You can delete .map files from the build output if you want to disable it, although you'll get console warnings about them missing.

There is no harm in leaving them in though in my opinion. Client code is already available to the user’s machine so there’s no secrets in it.

Also ensure you have proper production build, the output of npm run build/yarn build is the one which should be deployed to your server.

If you want to completely disable generation of source maps use:

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

You can also specify GENERATE_SOURCEMAP=false parameter via .env configuration files or use in plain console command GENERATE_SOURCEMAP=false react-scripts build.

Answer 2

Delete all the .map files (from js/ and css/ folder) before uploading to the production server

Answer 3

On a windows machine, this helped me

"build": "set 'GENERATE_SOURCEMAP=false' && react-scripts build",

Incase you are using react-app-rewired you can try the below.

I have used a package called as cross-env. It can inject your environment variables.

"build": "cross-env GENERATE_SOURCEMAP=false react-app-rewired build"

Answer 4

Make this change in package.json file and you are good to go.

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

Answer 5

Here are three ways to hide code.

1. Using .env File.

GENERATE_SOURCEMAP=false

2. Using command line.

GENERATE_SOURCEMAP=false react-scripts build

3. Using package.json

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

Answer 6

Or you can use GENERATE_SOURCEMAP=false react-scripts build on linux/mac