Create-react-app: Request for option to build a non-minified production build

Created on 8 Nov 2017 · 7Comments · Source: facebook/create-react-app

Is this a bug report?

No. It's a feature request that will help me debug a problem with my code.

Similar to issue #3403, I also want a non-minified build. The discussion on that issue seemed to stall when no use-case could be provided. I have what I believe to be a valid use-case.

I'm using the react-scroll library and have things working perfectly in a development build (yarn run start), however, in a production build (yarn run build) scrolling takes place but not to the correct location. I'm quite certain that I'm doing something wrong rather than there being any issue in react-scroll, but I don't yet know what that wrong thing is.

As the development build works, I can't use it to debug the issue. I can try to debug the issue in a production build, but the components in the React developer tools have annoyingly short names such as g, h and t. I can work with that, but its annoying having to do so.

Source maps are working correctly, so I can set a breakpoint and see intelligible code. However, as a result of minification the variable names available in the console, don't match those shown in the source map. For example, suppose I have a makeSection function which is used in setting up react-scroll and its output stored in a variable sections. If I set a breakpoint after the variable sections has been set, and try to run sections in the console, I get an Uncaught ReferenceError. This can be worked around, but it is annoying to need to do so.

I know that I can use the debugger to see what's in the sections variable, but sometimes it nice to be able to evaluate code in the console and see what happens. The minification makes this annoyingly awkward.

So the first use-case is to make debugging production code more pleasant. There is a more general point here too.

The bug I'm experiencing is caused by a difference between the development build and production build, but which step introduces it I don't know. Perhaps it's a difference in the webpack config; or a difference in babel plugins; or perhaps even as a result of minification itself.

Whilst they might all be unlikely, I'd like to be able to toggle each difference between a development build and a production build and see which ones reproduce the issue. This would likely give me a better insight into the issue or at least give me a better idea of where to start looking.

Source

benarmston

👍2

All 7 comments

You ship bundle code with sourcemaps. If you go to Chrome and open Sources tab, use Cmd+p (or Ctrl + p), you can search through your source files (e.g. MyComponent.js). There you can set breakpoints and debug further. Sometimes it takes some time to load sourcemaps, since they're very big.

themre on 8 Nov 2017

Thanks for your response. I do have source maps working and they help a great deal. However, even when using source maps there are still a few annoyances with debugging that I'd like not to have to deal with. The 5th and 6th paragraphs of the issue description detail them. But even with source maps correctly setup they don't solve the issue that I have with the React developer tools.

More importantly source maps don't allow me to rule out minification as a source of the bug that I'm experiencing. I suspect that it isn't the source, but I'd like to be able toggle each difference between the development build and the production build to rule them out.

benarmston on 8 Nov 2017

I'm not sure we'll be adding this option, and if we did it's a while out.
You can modify your webpack configuration inside node_modules temporarily to create a build for testing purposes.

Timer on 9 Nov 2017

👎1

I think the feature will be helpful.

radi-cho on 11 Nov 2017

How often are you getting different behavior between development and production? I feel like this should be rare enough that branch -> eject -> disable minification -> debug is the right path.