Material-components-web: Unexpected token: name (MDCRipple) from UglifyJS

[amrittb]

I am using Laravel Mix to compile my assets. Laravel Mix has a script to compile minified assets.

npm run production

This, in turn, invokes UglifyJS to minify assets.
During this step it throws an error.

Unexpected token: name (MDCRipple) [./~/@material/ripple/index.js:25,0]

I am using material-components-web version 0.8.0.

[Garbee]

Is your webpack build setup to use babel with the es2015 presets? That is what fixed the same type of error for me and others.

[amrittb]

Yes. The package I mentioned Laravel Mix has support for es2015, .vue files, .jsx files.

[Garbee]

You may want to try the uglify version for harmony syntax.

Looking at other issues on mix as well, it seems like this is all related to the various syntax differences between projects. You just need to make sure your babel is configured right.

This is my config that works.

.babelrc

{
  "presets": [
    "es2015"
  ],
  "plugins": [
    "transform-es2015-block-scoping"
  ]
}

[amrittb]

I have no idea where I went wrong.

Here is my package.json file.

{
  "name": "project",
  "version": "1.0.0",
  "description": "Project",
  "main": "index.js",
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack --progress --hide-modules",
    "watch": "cross-env NODE_ENV=development webpack --watch --progress --hide-modules",
    "server": "php -S localhost:8080 -t public",
    "hot": "cross-env NODE_ENV=development webpack-dev-server --inline --hot",
    "production": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-plugin-transform-es2015-block-scoping": "^6.24.1",
    "babel-preset-es2015": "^6.24.1",
    "cross-env": "^4.0.0",
    "laravel-mix": "^0.10.0",
    "material-components-web": "^0.8.0",
    "webpack": "^2.4.1",
    "webpack-dev-server": "^2.4.2",
    "uglify-js": "git+https://github.com/mishoo/UglifyJS2.git#harmony"
  }
}

Here is .babelrc file.

{
  "presets": [
    "es2015"
  ],
  "plugins": [
    "transform-es2015-block-scoping"
  ]
}

[traviskaufman]

Hey @amrittb,

We use uglifyJS ourselves after a pass using babel and it seems to work fine for us. Could you link us to a demo repo we could use to triage the issue? It sounds like something is off with your build system.

[traviskaufman]

Any updates on this @amrittb?

[amrittb]

I have created a Demo Repository. Here - Test Repository

[lpirola]

I got this same bug with this repo: https://github.com/nossas/vivos-em-nos

When I try to yarn run build the exception occur.

[Garbee]

@lpirola Do you mind pointing out how MCW is being used in that vivos-em-nos repository? I'm not seeing it being included right off.

[lpirola]

After have commented I tried to add uglify with harmony and the build work like a charm!

[lpirola]

@Garbee It's used through https://github.com/prateekbh/preact-material-components

Thanks for fast reply! :)

[Garbee]

@amrittb Your problem is you aren't running js files through the babel-loader. There is no rule set for js files. Once you run the JS files through babel things compile properly.

I suspect what is going on for you @lpirola is around the same lines. You need to make sure the material component JS files get ran through babel. This means allowing node_module stuff to be compiled through babel.

[lpirola]

@Garbee you are right, thanks!

[amrittb]

@Garbee, Thanks! It worked like a charm.

[MicroDreamIT]

I am have same problem, can you please take a look,

https://github.com/JeffreyWay/laravel-mix/issues/878

[crocodilered]

I have [email protected] and the issue is still here :-(

[shmshd]

@crocodilered use terser-webpack-plugin instead of uglifyjs-webpack-plugin.