Enable javascript source maps in production in create-react-app

Viewed 344

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

0 Answers
Related