I was wondering if it is possible to have javascript source maps in a production build of create-react-app
I have asked this question on the create-react-app spectrum but no replies https://spectrum.chat/create-react-app/general/sourcemaps-not-working-in-production~2995d466-e080-4d35-8151-bad3e7f8fb98
Example procedure
npx create-react-app test
cd test
**modify src/App.js to console.error in the App function and nothing else really, see below**
yarn build
cd build
python -m SimpleHTTPServer //or some static web server for current folder
visit http://localhost:8000, see that all the names are mangled in the stack trace for the console.error
Example App.js modification
import React from 'react';
import logo from './logo.svg';
import './App.css';
function MyFunction() {
console.error('hello world')
}
function App() {
MyFunction()
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
This is the stack trace of this console.error in the devtools
App.js:6 hello world
i @ main.34a6654b.chunk.js:1
Ki @ 2.d53d57ba.chunk.js:2
vo @ 2.d53d57ba.chunk.js:2
cu @ 2.d53d57ba.chunk.js:2
ou @ 2.d53d57ba.chunk.js:2
Zo @ 2.d53d57ba.chunk.js:2
qo @ 2.d53d57ba.chunk.js:2
Du @ 2.d53d57ba.chunk.js:2
This is unreadable. If a user ends up crashing our app, how do we get a proper stack trace from them ?
I see in the devtools console of the production build it does say "Source map detected" so there is a source map. But it just doesn't function?
Using create-react-app 3.4.1 currently