material-components-web: Failed to minify the code

What MDC-Web Version are you using?

0.19.0

What OS are you using?

macOS Sierra

What are the steps to reproduce the bug?

Please write the steps which need to be taken in order to reproduce the bug. These steps should be as detailed as possible, e.g.

  1. Using react-scripts build
  2. Do yarn build

What is the expected behavior?

No errors.

What is the actual behavior?

I get the following error:

$ yarn build
yarn build v0.27.5
$ react-scripts build
Creating an optimized production build...
Failed to compile.

Failed to minify the code from this file:

        ./node_modules/@material/base/foundation.js:20

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

error Command failed with exit code 1.

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Reactions: 2
  • Comments: 16 (5 by maintainers)

Most upvoted comments

@lynnjepsen any news about this issue? I recently got the same error as @zomars. Regarding to http://bit.ly/2tRViJ9 this issue could be resolved by deploying a precompiled file?

I had this issue and fixed it Note: My setup is with create react app (and webpack 4)

I ultimately used @endersaka method, except you need to escape a forward slash

So you need to change test: /\.(js|jsx|mjs)$/, include: paths.appSrc, loader: require.resolve('babel-loader'), in node_modules/react-scripts/config/webpack.config.prod.js to

test: /\.(js|jsx|mjs)$/, include: [ paths.appSrc, paths.appNodeModules + "\\@material" ], loader: require.resolve('babel-loader'),

hope it works for you as well

Possibly related to https://github.com/material-components/material-components-web/issues/929

Try parsing the module to ES2015 first.

I’m currently adding node_modules/@material to the include option of babel, haven’t tried using Webpack but works fine with Rollup, to do so in Webpack modify this line inside /node_modules/react-scripts/config/webpack.config.prod.js

Webpack -> Rollup. Rollup is more friendly to the library. There have been many libs use Rollup (such as Vue, D3, Three, Redux…).

Use Webpack for applications, and Rollup for libraries.