Failed to minify the code from this file: ./node_modules/material-ui/es/styles/withStyles.js:36

[tugrulyilmazer]

I have an error while creating an optimized production build of react application.

Error message is:
Failed to compile. Failed to minify the code from this file: ./node_modules/material-ui/es/styles/withStyles.js:36 Read more here: http://bit.ly/2tRViJ9

Error log: 2018-04-17T08_28_43_938Z-debug.log

• [ x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Should compile with success for react production.

Current Behavior

Creating an optimized production build... Failed to compile.

Your Environment

Tech	Version
Material-UI	^1.0.0-beta.42
React	16.3.1

[oliviertassinari]

@tugrulyilmazer The relevant parts of the documentation:

• https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-build-fails-to-minify
• https://material-ui.com/guides/minimizing-bundle-size/#ecmascript.

[wyaeld]

@oliviertassinari I'm not understanding a solution here

create-react-app is a logical starting point for many people doing app development, and material-ui appears to be published in a way that is not compatible OOTB with it trying to run a production build.

The docs about reducing a bundle size don't give any obvious answers. I'm not trying to be more efficient, I'm only importing what I need, but since withStyles is core to the entire theming experience, I can't avoid it, and the react-scripts build command can't get through it.

Specifically this line in @material-ui/core/es/styles/withStyles.js:L31

let indexCounter = Number.MIN_SAFE_INTEGER; // Exported for test purposes

results in this error

yarn run v1.7.0
$ react-scripts build
Creating an optimized production build...
Failed to compile.

Failed to minify the code from this file: 

 	./node_modules/@material-ui/core/es/styles/withStyles.js:31 

Read more here: http://bit.ly/2tRViJ9

If there is a simple configuration workaround, could you please explain it. Some of us aren't as skilled at webpack and the like, and would greatly appreciate a little more guidance

[wyaeld]

Following the docs referenced, attempted to solve problem by changing

import { withStyles}  from '@material-ui/core/styles';

to

import withStyles from '@material-ui/core/styles/withStyles';

but results in the same error.

Reading #11281 makes me think the issue is connected, and no matter how I specify the import webpack is still going to follow index.es.js and run into problems.

Is there another way around it?

[oliviertassinari]

@wyaeld Something must be wrong with your setup. We can't help without a reproduction. The example we host in examples/create-react-app is working.

[wyaeld]

Thanks Oliver. I've done more work today, can narrow the problem down to a particular symptom, but not understanding why it occurs in my project and not the example, given they both use default current create-react-app The symptom is that uglify-js 2.x blows up on the first use of `let` that it encounters. Its nothing to do with the withStyles.js file itself. For now I'm trying to work around it by upgrading create-react-app to the upcoming 2 (react-scripts#next) line, which brings in later versions of the webpack-uglify-plugin and I believe adds full es support. This builds, but I haven't regression tested it yet.

…

On Wed, 13 Jun 2018 at 08:49, Olivier Tassinari ***@***.***> wrote: @wyaeld <https://github.com/wyaeld> Something must be wrong with your setup. We can't help without a reproduction. The example we host in examples/create-react-app is working. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#11044 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAJm0IPumtcmq_8GaRRIoVTK_UBB_L2gks5t8Ck8gaJpZM4TX3pG> .

[Jaujon]

I had the same issue, turned out I imported a component with the following statement: import Component from 'material-ui/es/Component/Component'. The es/ part in the import path was the problem.

[oliviertassinari]

It's a duplicate of #9056

[aemc]

@Jaujon Thanks! I've had a similar issue. My IntelliJ auto imports for me so it decided to insert one of the options that had es/ in it. Removing all instances of it fixed the problem.

[joeflack4]

Much thanks to Jaujon. Should probably update these docs with this fix or otherwise print a better error message: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify