Jest: Babel 7 setup 'was loaded with "6.26.3"'

[verekia]

🐛 Bug Report

The setup suggested in the documentation doesn't seem to work and triggers the following error message:

$ jest
 FAIL  ./hi.test.js
  ● Test suite failed to run

    Requires Babel "^7.0.0-0", but was loaded with "6.26.3". If you are sure you have a compatible version of @babel/core, it is likely that something in your build process is loading the wrong version. Inspect the stack trace of this error to look for the first entry that doesn't mention "@babel/core" or "babel-core" to see what is calling Babel. (While processing preset: "/Users/verekia/Local/Code/minimal-jest-babel-7/node_modules/@babel/preset-env/lib/index.js")

      at throwVersionError (node_modules/@babel/helper-plugin-utils/lib/index.js:65:11)
          at Array.map (<anonymous>)

(inline): Requires Babel "^7.0.0-0", but was loaded with "6.26.3". If you are sure you have a compatible version of @babel/core, it is likely that something in your build process is loading the wrong version. Inspect the stack trace of this error to look for the first entry that doesn't mention "@babel/core" or "babel-core" to see what is calling Babel. (While processing preset: "/Users/verekia/Local/Code/minimal-jest-babel-7/node_modules/@babel/preset-env/lib/index.js")

To Reproduce

The package.json used is the following:

{
  "name": "minimal-jest-babel-7",
  "version": "1.0.0",
  "license": "MIT",
  "scripts": {
    "start": "babel-node consumer.js",
    "test": "jest"
  },
  "babel": {
    "presets": [
      "@babel/preset-env"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.0.0-beta.52",
    "@babel/node": "^7.0.0-beta.52",
    "@babel/preset-env": "^7.0.0-beta.52",
    "babel-core": "^7.0.0-0",
    "jest": "^23.3.0"
  }
}

Expected behavior

Running jest should be able to run the test, which includes an import statement. The babel-node command of the minimal repo executes the import successfully.

Link to repl or repo (highly encouraged)

Here is a minimal repo: https://github.com/verekia/minimal-jest-babel-7

Run npx envinfo --preset jest

Paste the results here:

  System:
    OS: macOS High Sierra 10.13.5
    CPU: x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
  Binaries:
    Node: 10.1.0 - /usr/local/bin/node
    Yarn: 1.7.0 - ~/.yarn/bin/yarn
    npm: 5.6.0 - /usr/local/bin/npm
  npmPackages:
    jest: ^23.3.0 => 23.3.0 

[SimenB]

The docs says to install babel-jest 'babel-core@^7.0.0-0' @babel/core regenerator-runtime (https://jestjs.io/docs/en/getting-started#using-babel). Doing that (adding babel-jest) makes your reproduction pass.

(note that regenerator runtime is not needed, I honestly don't remember in which cases it is)

[verekia]

Thanks, it worked. Maybe change of remove the sentence Note: babel-jest is automatically installed when installing Jest and will automatically transform files if a babel configuration exists in your project. ?

[SimenB]

PR welcome to clarify the docs 🙂 The issue is with hoisting - unless you install babel-jest the one we require is nested within a directory which comes with babel-core@6 so it's loaded instead of the one at the top level

[SimenB]

PR also welcome to discover Requires Babel "^7.0.0-0", but was loaded with "6.26.3" and print a more useful warning (such as "make sure to install babel-jest yourself when using babel 7")

[verekia]

Actually it seems to work with an even simpler configuration:

  "babel": {
    "presets": [
      "@babel/preset-env"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.0.0-beta.52",
    "@babel/node": "^7.0.0-beta.52",
    "@babel/preset-env": "^7.0.0-beta.52",
    "jest": "^23.3.0"
  }

I updated the repo: https://github.com/verekia/minimal-jest-babel-7/blob/master/package.json

[SimenB]

That's because of the hoisting algorithm of yarn - I wouldn't depend on it. Up to you, though! 🙂

[verekia]

Okay. Thank you for your insight!

[good-idea]

My case with this error was a little different - I was getting this error because I didn't have [email protected] installed. The "Inspect the stack trace ..." message wasn't helpful because the whole stack was babel plugins and started with babel-core.

Anyway, not sure if it's something that would be helpful to add to the error warning - but hopefully this will at least be helpful to someone coming here with the same issue.

[benkeen]

We ran into the same problem. In our case, locally running tests ran fine but on our build server we'd get the error. All very puzzling. We tried many solutions outlined here and elsewhere but nothing worked. Eventually we found switching to npm solved it. But it was really bugging me because the whole _point_ of yarn is that it's deterministic! On reflection I think yarn's hoisting behaviour is the cause, as @SimenB pointed out. This is just a hunch, but since babel changed their package names between 6 and 7, package managers don't know babel-core is the same as @babel/core, so treat them separately. In our yarn file I noticed it had hoisted both versions of babel to the top, even though in our package file we only specify @babel/core. So my hunch is that yarn _did_ behave deterministically and downloads the same stuff for everyone, but when we ran the jest command on our two environments, something in that command loaded one before the other because there was no hierarchy. npm doesn't hoist, so doesn't exhibit this problem.

[DominicTobias]

This is pretty annoying none of the solutions work like yarn add --dev babel-jest babel-core@^7.0.0-bridge.0 @babel/core regenerator-runtime. Should I not be using the new plugins like @babel/plugin-proposal-class-properties? I have babel-jest and babel-core (v7 bridge) installed still nothing :/ I had @babel/core also listed but tried removing it, didn't help.

IIRC deps need to be installed in a specific order but can't remember and nothing works! Why doesn't jest update it's deps to use babel 7?

[DominicTobias]

None of the solutions online worked, I fixed it the following way:

1. Remove jest and @babel/core from package.json (keep babel-core v7 bridge)
2. Remove node_modules and package-lock.json
3. npm install
4. npm install jest @babel/core --save-dev

[ruslankhh]

I fix this problem with them.

npm i -D jest babel-jest babel-core@^7.0.0-bridge.0 @babel/core regenerator-runtime

```js
// babel.config.js
'use strict';

module.exports = {
presets: [
'@babel/preset-env',
'@babel/preset-react'
],
plugins: [
'@babel/plugin-transform-modules-commonjs',
'@babel/plugin-transform-object-assign',
'@babel/plugin-proposal-class-properties',
'@babel/plugin-proposal-object-rest-spread'
]
};

```js
// jest.config.js
'use strict';

module.exports = {
    transform: {
        '^.+\\.jsx$': 'babel-jest',
        '^.+\\.js$': 'babel-jest'
    }
};

[kmwarter]

This took me an entire day to figure out. I tried, it feels like maybe thousands of logical solutions. I used git bisect to figure out the exact commit where the issue occured. I removed the package we had added. I then finally isolated that the package-lock.json was causing the issue because when I added all files from the bad commit one by one everything worked fine, but if I swapped the package-lock.json files it broke again. However, when I tried to go back to master and just delete the package-lock.json and the node modules it did not work. I also tried DominicTobias solution and it did not work. Finally the following order of operations worked:

1. delete your node_modules and package-lock.json (maybe this isn't necessary but just start with a clean slate just in case because this is what I did
2. like ruslankhh said, run the following : npm i -D jest babel-jest babel-core@^7.0.0-bridge.0 @babel/core regenerator-runtime
3. Now delete your node_modules and your package-lock.json again
4. Now run npm install

¯_(ツ)_/¯

[ruslankhh]

I've noticed that it's important to write babel.config.js, not .babelrc :)

[huchenme]

@ruslankhh same here

[liranh85]

@ruslankhh and @kmwarter, thanks a lot guys, this worked for me as well!

[gricard]

@kmwarter that did the trick for me. thank you.

[rhernandog]

Hello, I'm just starting with Jest and I have a question related to this.

This is how my package.json looks like:

"devDependencies": {
  "@babel/cli": "^7.1.5",
  "@babel/core": "^7.1.6",
  "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
  "@babel/preset-env": "^7.1.6",
  "@babel/preset-react": "^7.0.0",
  "autoprefixer": "^9.3.1",
  "babel-eslint": "^10.0.1",
  "babel-loader": "^8.0.4",
  "browser-sync-webpack-plugin": "^2.2.2",
  "clean-webpack-plugin": "^0.1.19",
  "css-loader": "^1.0.1",
  "eslint": "^5.9.0",
  "eslint-plugin-react": "^7.11.1",
  "html-webpack-plugin": "^3.2.0",
  "mini-css-extract-plugin": "^0.4.5",
  "node-sass": "^4.10.0",
  "postcss-loader": "^3.0.0",
  "sass-loader": "^7.1.0",
  "style-loader": "^0.23.1",
  "webpack": "^4.26.1",
  "webpack-clean-obsolete-chunks": "^0.4.0",
  "webpack-cli": "^3.1.2",
  "webpack-manifest-plugin": "^2.0.4"
}

If babel core is pointing to 7.1.6 and babel 7 is require, why in the package-lock,json, jest-config has the following dependencies:

"jest-config": {
  "version": "23.6.0",
  "resolved": "https://registry.npmjs.org/jest-config/-/jest-config-23.6.0.tgz",
  "integrity": "sha512-i8V7z9BeDXab1+VNo78WM0AtWpBRXJLnkT+lyT+Slx/cbP5sZJ0+NDuLcmBE5hXAoK0aUp7vI+MOxR+R4d8SRQ==",
  "dev": true,
  "requires": {
    "babel-core": "6.26.3",
    "babel-jest": "23.6.0",
    "chalk": "2.4.1",
    "glob": "7.1.2",
    "jest-environment-jsdom": "23.4.0",
    "jest-environment-node": "23.4.0",
    "jest-get-type": "22.4.3",
    "jest-jasmine2": "23.6.0",
    "jest-regex-util": "23.3.0",
    "jest-resolve": "23.6.0",
    "jest-util": "23.4.0",
    "jest-validate": "23.6.0",
    "micromatch": "2.3.11",
    "pretty-format": "23.6.0"
  },
  "dependencies": {
    "ansi-styles": {
      "version": "3.2.1",
      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
      "dev": true,
      "requires": {
        "color-convert": "1.9.1"
      }
    },
    "chalk": {
      "version": "2.4.1",
      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz",
      "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==",
      "dev": true,
      "requires": {
        "ansi-styles": "3.2.1",
        "escape-string-regexp": "1.0.5",
        "supports-color": "5.5.0"
      }
    },
    "supports-color": {
      "version": "5.5.0",
      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
      "dev": true,
      "requires": {
        "has-flag": "3.0.0"
      }
    }
  }
}

That could basically be the cause of babel 6.26.3 being installed instead of ^7

[atherdon]

@rhernandog use this approach: https://github.com/facebook/jest/issues/6662#issuecomment-429620436
basically - you need to add babel-bridge(but still keep that logic of install and clean up) to your project and i think it'll work for you. Just today have an issue with jest too - after following that logic - my jest script start to work

[rhernandog]

@atherdon Yeah, that solved, no problem there.

I just posted to share my guess of where this problem could be generating. In the whole package-lock.json file that is the only reference to babel 6.26.3, so that's perhaps what's causing this.

[amslezak]

Setting my jest.config.js fixed this error for me:

// jest.config.js
module.exports = {
  transform: {},
}

As per Jest Getted Started, if you're using a babel config, jest will use that (and any transforms). You may need to override it for jest 24 to work with babel 7 (as was required in my case).