Create-react-app: Is there a way to remove sourcemap line in built assets?

[tbillington]

Similar question here: https://github.com/facebookincubator/create-react-app/issues/1004.

Is a nice way to remove the sourcemap line from the .js and .css files?

I'm tossing up between looking for the sourcemap pattern (//# sourcemap etc) and removing the match or ejecting to remove it from the webpack config, though that seems drastic for such a minor change.

[gaearon]

Could you tell more about the use case?

[shrynx]

@tbillington @gaearon you can add a postbuild or (pre in case of gh-pages ,etc) script to your package.json and use rimraf to remove the files.

   // package.json
  ...

  "scripts": {
     ...

     "build": "react-scripts build",
     "postbuild": "rimraf build/**/*.map",

      ...
  }

The //# sourcemap line will give warning source map not found on dev console though.
Removing this would be little troublesome but can be totally done using postbuild script. you can create a script using decomment and run it as part of postbuild or (prepublish, etc)

[tbillington]

@shrynx I already have a postbuild script in which I look for the comment lines and delete them like this (It just feels a little brittle, though it does the job):

sed -i '' -e '/\/\/# sourceMappingURL.*/d' main.js
sed -i '' -e '/\/\*# sourceMappingURL.*/d' main.css

@gaearon My use case is quite non-standard (I'm including the css in the js file to make a single file deploy, having the comment line breaks what I'm doing), I wasn't looking to get this feature included in react-scripts, just looking for input on whether there is an easier way to do this or not :) !

[vasconita]

@tbillington it didn't work for me.

I just did some auxiliar scripts in order to delete sourcemaps and references to them:

"build": "react-scripts build && yarn run delete-maps",
"delete-maps": "yarn run delete-map-files && yarn run delete-references-to-map-files",
"delete-map-files": "find ./build -name '*.map' -delete",
"delete-references-to-map-files": "find ./build -regex '.*\\.\\(js\\|css\\)' -exec sed -i -E '\\/[\\*\\/]#\\ssourceMappingURL=main(\\.[0-9a-f]+)?\\.(css|js)\\.map(\\*\\/)?/g' {} +"

[gaearon]

I’ll close since workarounds exist, and it doesn’t seem like a very common issue.

My use case is quite non-standard (I'm including the css in the js file to make a single file deploy, having the comment line breaks what I'm doing)

Not sure why—can't you add a newline after it (or include CSS before main JS kicks is)?

[JikkuJose]

Sorry to open this issue, but can someone explain whats the rationale in having source maps in production builds?

[Timer]

They are super useful for error reporting for example, as well as for analysing bundle size from dependencies. Whether you choose to deploy them or not is your choice, but producing them is useful.

See https://github.com/facebookincubator/create-react-app/issues/1004.

[JikkuJose]

Thanks @Timer, I do understand the value of source maps to trace back problems. But is it necessary for production builds too? Isn't it sensible only for development?

[Timer]

They're very useful for analysing your production bundle; but they're completely optional to ship. If you don't want them in production you can opt-out.

Knowing proper stack traces is also useful in production with things like Rollbar or Sentry.

[JikkuJose]

Sure, we could use it to analyse the production build. But, I still don't understand any reason to ship it at all.

[Timer]

But, I still don't understand any reason to ship it at all.

Shipping it is your choice to make.

[gaearon]

Once you have the build folder you can do anything with it. For example rm build/static/js/*.map. Or move them to a secret folder so you can reupload them to Sentry.

[viankakrisna]

Sure, we could use it to analyse the production build. But, I still don't understand any reason to ship it at all.

Sometimes maybe the developer has a code path that isn't properly tested in development, and it explodes in production, shipping source map is beneficial in this case so they can debug what is happening. And source maps is only downloaded if devtools is open, so the normal user won't download it. As the concerns with exposing the source code, I think it does not matter because web is an open platform and you should never expose secret in the client code. A mangled js file can be beautified easily to see what the code does. So ¯\_(ツ)_/¯

[JikkuJose]

@Timer thanks for your time. Think I was being unclear, I was only persisting as I grew up assuming that "none of our system failures should provide any detailed warnings/errors to the users". But, perhaps a frontend failure might be considered in a different way as @viankakrisna mentioned. Since we can't hide the source code a tech savvy user may be encouraged to explore using source maps & hopefully report it back.

[suhaotian]

• You can add a postbuild or (pre in case of gh-pages ,etc) script to your package.json:

   // package.json
  ...

  "scripts": {
     ...

     "build": "react-scripts build",
     "postbuild": "node ./delete-maps.js",

      ...
  }

• Create a new script called delete-sourcemap.js in project's root:

const fs = require('fs')

function deleteMaps(dir) {
  fs.readdir(dir, function(err, files) {
    files.forEach((file) => {
      if(/\.map$/.test(file)) {
        fs.unlinkSync(dir+file)
      } else {
        fs.readFile(dir+file, 'utf8', (err, data) => {
          let result = data.split('\n')
          console.log(result.length)
          if (result[result.length-1] !== undefined && result.length > 1) {
            fs.writeFileSync(dir+file, result.slice(0, result.length-1).join('\n'))
          }
        })
      }
    })
  })
}

['./build/static/css/', './build/static/js/'].map(deleteMaps)

[viviancpy]

I just had a look on stacktrace-js and stacktrace-gps. I could track the stackframes with stacktracejs and use the sourcemaps with stacktrace-gps to return something meaningful like AwesomeApp.js line 40 rather than bundle.js line1 column 30000. Keeping the exact sourcemap which bundled the shipped js is necessary for error reporting (at minimal to handle unexpected JS error in my own JS codes).

I have two options, either ship the sourcemap together so that my React App call stacktrace-gps to send back AwesomeApp.js line 40. Or option 2, not ship sourcemap , but send back stackframes and I use stacktrace-gps locally with sourcemap saved in my repo to convert stackframes to AwesomeApp.js line 40.

Then no need to use Sentry.

[bhanupradeep7]

run "webpack -p --devtool false".. this will remove sourceMapUrl in production environemnt

[SandMoshi]

Do I need to say npm run postbuild to run @suhaotian 's script or will it run automatically after I use npm run build?

[TommieEdwardBerry]

Relative to @SandMoshi 's question "Do I need to say npm run postbuild to run @suhaotian 's script or will it run automatically after I use npm run build?"

No, "npm run build" runs the build and then the postbuild scripts.
At least it does for me using node v8.9.1 and npm 5.5.1

[SanichKotikov]

GENERATE_SOURCEMAP=false react-scripts build doesn't work?

[behnammodi]

@SanichKotikov it's work thanks

[yoerivdm]

I have some test on node_env in my sources ... process.env.NODE_ENV !== 'production
What I don't like is that the non-'production' code is included in the sourcemaps when making a production build, in the actual packed code, it's left out.

This looks more like a bug to me?

[einomi]

SanichKotikov's solution worked for me. Don't also forget to turn off sourcemaps for postcss-cli if you use it in postbuild task.

For example:
"postbuild": "postcss --no-map --use postcss-custom-properties --replace build/**/*.css",