Material-ui: Minification problem in create-react-app

[chroth7]

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

Expected Behavior

I am trying to build a create-react-app for production using `npm run build``

Current Behavior

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

Failed to minify the code from this file: 

        ./node_modules/material-ui/es/styles/withStyles.js:37 

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

This build process includes a minification step (can't be configured, for all I know), which fails (see above), as the 1.0.0-beta.20 version of your wonderful package is in ES6.

This error pattern is known in create-react-app, see the link in their docu: http://bit.ly/2tRViJ9

Steps to Reproduce (for bugs)

Can't provide a sandbox, as you need to use create-react-app and build for prod.

1. Create a create-react-app
2. Add material-ui dependency (1.0.0-beta.20)
3. Run npm run build

Context

Trying to build for prod.

Your Environment

node 8.1.1
npm 5.5.1

| Tech | Version |
|--------------|---------|
| Material-UI | 1.0.0-beta.20 |
| React | 16.0.0 |
| browser | -- |
| etc | -- |

[oliviertassinari]

Can we have a look at your code?

[chroth7]

I found a workaround:

if you use something like:
import Button from 'material-ui/es/Button/Button'; it will break
if you instead use:
import { Button, Divider } from 'material-ui'; it works

CODE example (breaks):

1. create-react-app foo
2. npm install material-ui@next
3. npm install
4. Add a button (I did it in src/App.js

5. npm run build -> Breaks

See here https://github.com/chroth7/minificationproblem on master

Hope that helps - I am using the "workaround" now.

[oliviertassinari]

The following folder @material-ui/core/es contains the es modules. It's using the latest stable feature of the JavaScript language. The create-react-app error message link is explicit:

In the future, we might start automatically compiling incompatible third-party modules, but it is not currently supported. This approach would also slow down the production builds.

So, use this import path instead, you will find the ES5 version of our modules:

import Button from '@material-ui/core/Button

[chroth7]

Ok perfect, thanks for the clarification! I didn't pay attention to the es in the path when navigating the node modules.

Thanks Olivier!

[miszmaniac]

Would be great if this could be avoided, for example using some other package in package.json?

[petegivens]

I'm having this same issue. My import statements read as import { withStyles } from 'material-ui/styles';, yet the create-react-app build script says

Failed to minify the code from this file: 

    ./node_modules/material-ui/es/styles/withStyles.js:28 

Any idea why it's looking inside the /es/ folder based on my imports?

[jakewilson801]

@petegivens do a full text search on your project for any imports with “es” in the path. I had that same issue but found I had a random es6 import buried in a component file. It will say that even if it’s not on the withStyles import.

[petegivens]

@jakewilson801 ahh thanks! that was it.