Material-ui: Getting `Can't resolve '@babel/runtime/helpers/builtin/classCallCheck'` after upgrading to Material UI 3.9.2

[fay-jai]

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

Expected Behavior 🤔

After upgrading my Material UI from an older 1.x version to the latest 3.9.2 version, I would expect that I have no webpack compilation errors.

Current Behavior 😯

After upgrading my Material UI from an older 1.x version to the latest 3.9.2 version, I'm running into webpack compilation issues. After looking at the existing issues, it seems very similar to this issue. However, I'm using an updated version of babel compared to that issue and I'm wondering if there's anything I'm doing wrong during the installation.

Steps to Reproduce 🕹

I tried upgrading the following Material UI packages:

However, here the are the errors I'm getting when webpack is running:

When I looked at the react-event-listener.cjs.js file in my node_modules/react-event-listener, I see that it is referencing babel packages with this directory structure:

It seems to be looking for a builtin directory inside of the babel package. However, when I looked at the babel package in my node_modules, I notice that there isn't a builtin directory under the helpers directory:

As a test, I modified the react-event-listener.cjs.js file and removed the reference to the builtin directory and webpack seems to compile and my application seems to work.

Context 🔦

I'm trying to use the latest version of Material UI instead of the much older 1.x version.

Your Environment 🌎

Here are my dependencies from package.json:

"devDependencies": {
    "@babel/cli": "7.2.3",
    "@babel/core": "7.3.3",
    "@babel/plugin-proposal-class-properties": "7.3.3",
    "@babel/plugin-proposal-decorators": "7.3.0",
    "@babel/plugin-proposal-object-rest-spread": "7.3.2",
    "@babel/preset-env": "7.3.1",
    "@babel/preset-react": "7.0.0",
    "@babel/register": "7.0.0",
    "app-module-path": "2.2.0",
    "autoprefixer": "9.4.8",
    "babel-eslint": "10.0.1",
    "babel-loader": "8.0.5",
    "chai": "4.2.0",
    "clean-webpack-plugin": "1.0.1",
    "css-loader": "2.1.0",
    "enzyme": "3.9.0",
    "enzyme-adapter-react-16": "1.9.1",
    "eslint": "5.14.1",
    "eslint-plugin-react": "7.12.4",
    "file-loader": "3.0.1",
    "jquery-param": "1.0.1",
    "jsdom": "11.11.0",
    "jsonwebtoken": "8.5.0",
    "mocha": "6.0.0",
    "node-sass": "4.11.0",
    "npm-run-all": "4.1.5",
    "postcss": "7.0.14",
    "postcss-loader": "3.0.0",
    "redux-devtools": "3.5.0",
    "redux-devtools-extension": "2.13.8",
    "resolve-url-loader": "3.0.1",
    "sass-loader": "7.1.0",
    "sinon": "7.2.4",
    "style-loader": "0.23.1",
    "stylelint": "9.10.1",
    "stylelint-config-standard": "18.2.0",
    "stylelint-scss": "3.5.3",
    "uglifyjs-webpack-plugin": "2.1.1",
    "url-loader": "1.1.2",
    "webpack": "4.29.5",
    "webpack-clean-obsolete-chunks": "0.4.0",
    "webpack-cli": "3.2.3"
  },
  "dependencies": {
    "@babel/polyfill": "7.2.5",
    "@material-ui/core": "3.9.2",
    "@material-ui/icons": "3.0.2",
    "@material-ui/lab": "3.0.0-alpha.30",
    "anchorme": "1.1.2",
    "bootstrap": "3.3.5",
    "classnames": "2.2.6",
    "crypto-js": "3.1.9-1",
    "googleapis": "15.0.0",
    "history": "4.7.2",
    "ismobilejs": "0.5.1",
    "isomorphic-fetch": "2.2.1",
    "jquery": "3.3.1",
    "lodash": "4.17.11",
    "moment": "2.24.0",
    "prop-types": "15.7.2",
    "query-string": "5",
    "react": "16.8.2",
    "react-autosuggest": "9.4.3",
    "react-bootstrap": "0.32.4",
    "react-color": "2.17.0",
    "react-datepicker": "1.6.0",
    "react-dom": "16.8.2",
    "react-joyride": "1.11.4",
    "react-modal": "3.8.1",
    "react-redux": "5.0.7",
    "react-router-dom": "4.3.1",
    "react-slick": "0.23.2",
    "react-tooltip": "3.9.2",
    "react-ultimate-pagination-bootstrap-3": "1.2.0",
    "react-virtualized": "9.21.0",
    "recharts": "1.5.0",
    "redux": "4.0.1",
    "redux-logger": "3.0.6",
    "redux-thunk": "2.3.0",
    "slick-carousel": "1.8.1",
    "sprintf-js": "1.1.2",
    "validator": "6.2.0"
  }

[oliviertassinari]

@fay-jai Thanks for the detailed report, it helps! Have a look at those two files:

• https://unpkg.com/react-event-listener/dist/react-event-listener.cjs.js
• https://unpkg.com/[email protected]/dist/react-event-listener.cjs.js

Notice the /builtin import difference. It seems you have an outdated version of react-event-listener installed. Update it and you should be good (>= 0.6.3).

[oliviertassinari]

Oh wait:
https://github.com/mui-org/material-ui/blob/f0cdca8e1df266f7aca50afb899b73663986da36/packages/material-ui/package.json#L62

We should increase the minimum required version!

[oliviertassinari]

What do you think of this diff:

- "react-event-listener": "^0.6.2",
+ "react-event-listener": "^0.6.6",

Do you want to submit a pull request? :)

[fay-jai]

Awesome - thanks so much for the response @oliviertassinari! Do you happen to know when the next release will happen?

[oliviertassinari]

The fix targets the next branch, so the v4.0.0-alpha channel. We will release it within a week.

[fay-jai]

Thank you @oliviertassinari !

[scottc-netflix]

I had this problem, but with version 1.4.1 after using nvm to try out node 10 and then switching back to node 8. Wiping node_modules and using a known good package-lock.json did not fix it. It turned out that despite the self-healing cache I still needed to npm cache clear --force and then I was able to get it working. Hopefully this will save someone a few hours (or days)!

[fay-jai]

@scottc-netflix in your good package-lock.json file, did you have the 0.6.2 or 0.6.6 version of react-event-listener? I'm guessing that npm cache clear --force would only work if you actually had the 0.6.6 version right?

[scottc-netflix]

@fay-jai In the working version currently it installed 0.6.4. material-ui/core asks for ^0.6.0 so I'm not sure how it decided on installing that one even after wiping my lock file. I wish everyone would just lock their versions! Even if it's only a patch or point release you can't guarantee it didn't break something else.