How to avoid use of window.eval() with 'react-scripts start'

Question

I'm running a React app in a browser that does not support window.eval() , which appears to be being used by the React Dev Tools via webpack. See:

Uncaught Error: Sorry, peruse does not support window.eval().
    at window.eval.global.eval (/home/mrh/safe-releases/2017-09-21_Alpha_2/safe-browser-v0.11.2-linux-x64-dev/resources/app.asar/app/webPreload.prod.js:sourcemap:1)
    at Object../node_modules/react-dev-utils/webpackHotDevClient.js (0.chunk.js:5312)
    at __webpack_require__ (bundle.js:782)
    at fn (bundle.js:150)
    at Object.0 (main.chunk.js:750)
    at __webpack_require__ (bundle.js:782)
    at checkDeferredModules (bundle.js:46)
    at Array.webpackJsonpCallback [as push] (bundle.js:33)
    at main.chunk.js:1

This is a custom browser for the SAFE Network, and does not allow window.eval() so I want to find a way to avoid this.

Others have encountered a similar problem with this browser when using Vue.js and one of the Neutrino devs found a solution (see below), which was to change how source maps were being used. I don't understand how to do the equivalent here, and can't be sure that is the problem.

Here is the solution for a similar problem with Vue.js in case it helps:

https://github.com/neutrinojs/neutrino/issues/1063#issuecomment-417618637

Answer 1

I have a solution. A bit brutal, so if you know a better way please reply.

1) npm run eject to eject all the build tools and configuration so they can be configured individually. This is irreversible (see react-scripts eject )

2) Replace 'eval-source-map' with 'cheap-module-source-map' in webpack.config.js . For more info and alternative build map settings see Webpack Devtool

Using npm run start now works without needing window.eval() .