babel JS file can't resolve "@babel/runtime/helpers/builtin/classCallCheck"

Question

on-rest my project was working great untill I delete my node_modules file and try to re-install npm package.

I am getting this error

./node_modules/react-event-listener/dist/react-event-listener.cjs.js
Module not found: Can't resolve '@babel/runtime/helpers/builtin/classCallCheck' in '/Users/suatkarabacak/Desktop/demarkedashboard/node_modules/react-event-listener/dist'

My package.json is looking like this.

{
  "name": "demo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "admin-on-rest": "^1.4.1",
    "aor-dependent-input": "^1.2.0",
    "aor-parseserver-client": "0.3.0",
    "aor-rich-text-input": "^1.0.1",
    "babel-runtime": "^6.26.0",
    "parse": "^1.11.1",
    "parse-react": "^0.5.2",
    "prop-types": "^15.6.2",
    "react": "^15.6.2",
    "react-dom": "^15.6.2",
    "react-image-lightbox": "^4.6.0",
    "react-images": "^0.5.19"
  },
  "devDependencies": {
    "@babel/runtime": "^7.0.0-beta.56",
    "aor-color-input": "^1.2.1",
    "babel-polyfill": "^6.23.0",
    "react-scripts": "^1.1.4"
  },
  "homepage": "demo.html",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

There is no builtin folder.

What could be the problem ?

Contradistinction

Answer 1

Since Babel 7.x is still a beta version, there was a breaking change in beta.56, which was released yesterday.

"@babel/runtime": "^7.0.0-beta.56",

If you're using a beta version of something, it is dangerous to use ^ in your version number, because that means it will accept any recent version, whether or not it is actually compatible with previous beta versions.

Since react-scripts uses https://github.com/facebook/create-react-app/blob/1407287839f94151cec729bd89441d4eee7d9dd3/packages/babel-preset-react-app/package.json#L28

"@babel/plugin-transform-runtime": "7.0.0-beta.46",

Your should likely have

"@babel/runtime": "7.0.0-beta.46",

in your own package.json to match.

Pepsinate

That solved my problem. Thanks for solution and detailed info ! – Contradistinction

Answer 2

In my case the problem was in relative paths and complex project structure, so that I had to specify exact location of my node_modules directory:

module.exports = {  
    resolve: {
      modules: [
        path.resolve(__dirname, "node_modules")
      ],
  ...

Filmer

You, sir, are a hero - this was my issue - and I had been scouring the internet for days before finding this. – Joost

In which file do you add that ? – Tshombe

In my case it was webpack.config.js, but it depends on your build system – Filmer

process.cwd() instead of __dirname if your webpack config is in a subfolder – Seroka

Answer 3

In case you are running into this because of your dependency on material-ui:

Looks like material-ui updated its package.json to reference '7.0.0-beta.42' instead of '^7.0.0-beta.42'

See Issue: 12409

Expunge

Answer 4

If you want to use the 7.0.0-beta.56 version, the easiest solution is to create builtin/ folder manually inside helpers/ folder then, move or copy the contents of helpers folder inside helpers/builtin/ and you will not see this error message anymore.

Pronghorn

Answer 5

In case you do have material ui in there, make sure you've installed all that you're importing like /icons,/core.

Hypallage

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Proximal