DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Babel v7 error: "Cannot read property 'bindings' of null"
arisa_dev
arisa_dev

Posted on

Babel v7 error: "Cannot read property 'bindings' of null"

Hi there!

I'm Arisa, a freelance Full Stack Developer living in GermanyπŸ‡©πŸ‡ͺ

I'm developing Lilac, an online school with hands-on Frontend e-books and tutoringπŸ‘©β€πŸ’»

Who is this article for?

  • Anyone migrating Babel v7
  • Anyone fails the test with an error below (Jest)
  • Anyone needs to maintain an old project for about 2-3 years like this one

What was the error?

gif

Here's the troublemaker I hadπŸ‘‡

TypeError: Cannot read property 'bindings' of null
Enter fullscreen mode Exit fullscreen mode

Yup, this mister was annoying as it was because test error was showing me that all the tests were failing because of one line with null value returns.

But the value which my test was pointing out had returned value when I debug.

Alt Text

gif

Phew...!

Gotta stop blaming loopπŸ˜‘

Here is my environment.

  "devDependencies": {
    "@babel/preset-env": "^7.13.12",
    "babel-core": "^6.26.3",
    "babel-jest": "^26.0.1",
    "babel-preset-env": "^1.7.0",
    "css-loader": "^3.5.3",
    "eslint": "5.16.0",
    "eslint-config-airbnb": "^18.1.0",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-react": "^7.20.0",
    "jest": "^26.0.1",
    "jest-localstorage-mock": "^2.4.2",
    "node-sass": "^4.14.1",
    "sass-loader": "^8.0.2",
    "style-loader": "^1.2.1",
    "webpack": "^4.43.0",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "moment": "^2.24.0"
  }
Enter fullscreen mode Exit fullscreen mode

A solution

Change your .babelrc config from this below

// πŸ™…β€β™€οΈ not working
{
    "presets": [
      "env"
    ]
}
Enter fullscreen mode Exit fullscreen mode

to thisπŸ‘‡

// πŸ™†β€β™€οΈ works
{
  "presets": [
    ["@babel/preset-env"]
  ]
}
Enter fullscreen mode Exit fullscreen mode

And install @babel/preset-env as devDependencies.

$ yarn add --dev @babel/preset-env
Enter fullscreen mode Exit fullscreen mode

All set.

Run a test again, it won't fail if you wrote the test correctlyπŸ‘

Hope this blog post was something you were looking for!

Sources

Top comments (0)

🌱 DEV runs on 100% open source code known as Forem.

Β 
Contribute to the codebase or learn how to host your own.