Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Babel 7 setup 'was loaded with "6.26.3"' #6662

Closed
verekia opened this issue Jul 9, 2018 · 22 comments
Closed

Babel 7 setup 'was loaded with "6.26.3"' #6662

verekia opened this issue Jul 9, 2018 · 22 comments

Comments

@verekia
Copy link

verekia commented Jul 9, 2018

πŸ› 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
Copy link
Member

SimenB commented Jul 10, 2018

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)

@SimenB SimenB closed this as completed Jul 10, 2018
@verekia
Copy link
Author

verekia commented Jul 10, 2018

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
Copy link
Member

SimenB commented Jul 10, 2018

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
Copy link
Member

SimenB commented Jul 10, 2018

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
Copy link
Author

verekia commented Jul 10, 2018

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
Copy link
Member

SimenB commented Jul 10, 2018

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

@verekia
Copy link
Author

verekia commented Jul 10, 2018

Okay. Thank you for your insight!

@good-idea
Copy link

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
Copy link

benkeen commented Jul 18, 2018

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.

@sekoyo
Copy link

sekoyo commented Oct 11, 2018

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?

@sekoyo
Copy link

sekoyo commented Oct 11, 2018

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

@ruslanxdev
Copy link

ruslanxdev commented Oct 14, 2018

I fix this problem with them.

npm i -D jest babel-jest babel-core@^7.0.0-bridge.0 @babel/core regenerator-runtime
// 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'
  ]
};
// jest.config.js
'use strict';

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

@kmwarter
Copy link

kmwarter commented Nov 2, 2018

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

Β―_(ツ)_/Β―

@ruslanxdev
Copy link

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

@huchenme
Copy link

@ruslankhh same here

@liranh85
Copy link

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

@gricard
Copy link
Contributor

gricard commented Nov 19, 2018

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

@rhernandog
Copy link

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
Copy link

atherdon commented Dec 11, 2018

@rhernandog use this approach: #6662 (comment)
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
Copy link

@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
Copy link

amslezak commented Mar 8, 2019

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).

@github-actions
Copy link

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators May 12, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests