How to avoid publishing your frontend code and comments with React

Operating Systems, Editors, and Tools
1

I noticed that the original JavaScript/JSX and TypeScript/TSX source code (including code comments and environment variable names) is visible in websites created with create-react-app and Gatsby.

Webpack says:

You should configure your server to disallow access to the Source Map file for normal users!..
You should not deploy the Source Map file to the webserver. Instead only use it for error report tooling.

More opinions here.

I’m not sure why, but it looks like many frameworks aren’t removing sourcemaps in production by default. I wonder how many sites out there put notes in comments that they think will remain private once the code is compiled.

How to fix it in create-react-app

To fix it in create-react-app, add GENERATE_SOURCEMAP=false to the build script in package.json, like this:

"scripts": {
    "start": "react-scripts start",
    "build": "GENERATE_SOURCEMAP=false react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
},

It’s described on the advanced configuration page of the docs.

How to fix it in Gatsby

Install this plugin:

1 Like