Request for option to build a non-minified production build

[benarmston]

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.

[themre]

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.

[benarmston]

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.

[Timer]

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.

[radi-cho]

I think the feature will be helpful.

[heyimalex]

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.

[Vadorequest]

I'm also running into the same issue. I believe it should be possible to build without minification, especially for staging environments.

[Timer]

Dupe of #790