reactjs - Requires Babel "7.0.0-0" but was loaded with "6.26.3"

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.
Learn more about Collectives
Teams
Q&A for work
Connect and share knowledge within a single location that is structured and easy to search.
Learn more about Teams
Keep getting this error no matter what I tried installing (babel wise) as I follow other similar reports. this is the stack trace:
error: bundling failed: Error: 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:
"C:\\Users\\Admin-ESS\\Absent\\node_modules\\@babel\\preset-env\\lib\\index.js")
    at throwVersionError (C:\Users\Admin-ESS\Absent\node_modules\@babel\preset-env\node_modules\@babel\helper-plugin-utils\lib\index.js:65:11)
    at Object.assertVersion (C:\Users\Admin-ESS\Absent\node_modules\@babel\preset-env\node_modules\@babel\helper-plugin-utils\lib\index.js:13:11)
    at _default (C:\Users\Admin-ESS\Absent\node_modules\@babel\preset-env\lib\index.js:150:7)
    at C:\Users\Admin-ESS\Absent\node_modules\@babel\preset-env\node_modules\@babel\helper-plugin-utils\lib\index.js:19:12
    at C:\Users\Admin-ESS\Absent\node_modules\metro\node_modules\babel-core\lib\transformation\file\options\option-manager.js:317:46
    at Array.map (<anonymous>)
    at OptionManager.resolvePresets (C:\Users\Admin-ESS\Absent\node_modules\metro\node_modules\babel-core\lib\transformation\file\options\option-manager.js:275:20)
    at OptionManager.mergePresets (C:\Users\Admin-ESS\Absent\node_modules\metro\node_modules\babel-core\lib\transformation\file\options\option-manager.js:264:10)
    at OptionManager.mergeOptions (C:\Users\Admin-ESS\Absent\node_modules\metro\node_modules\babel-core\lib\transformation\file\options\option-manager.js:249:14)
    at OptionManager.init (C:\Users\Admin-ESS\Absent\node_modules\metro\node_modules\babel-core\lib\transformation\file\options\option-manager.js:368:12)
    at File.initOptions (C:\Users\Admin-ESS\Absent\node_modules\metro\node_modules\babel-core\lib\transformation\file\index.js:212:65)
    at new File (C:\Users\Admin-ESS\Absent\node_modules\metro\node_modules\babel-core\lib\transformation\file\index.js:135:24)
    at Pipeline.transform (C:\Users\Admin-ESS\Absent\node_modules\metro\node_modules\babel-core\lib\transformation\pipeline.js:46:16)
    at Object.transform (C:\Users\Admin-ESS\Absent\node_modules\metro\src\transformer.js:135:5)
    at Object.transformCode [as transform] (C:\Users\Admin-ESS\Absent\node_modules\metro\src\JSTransformer\worker\index.js:253:15)
    at execMethod (C:\Users\Admin-ESS\Absent\node_modules\jest-worker\build\child.js:92:29)
    at process.on (C:\Users\Admin-ESS\Absent\node_modules\jest-worker\build\child.js:42:7)
    at process.emit (events.js:180:13)
    at emit (internal/child_process.js:783:12)
and my package.json:
  "name": "Absent",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "babel-preset-react-native-stage-0": "^1.0.1",
    "jest": "^23.5.0",
    "jest-react-native": "^18.0.0",
    "react-test-renderer": "16.3.1"
  "scripts": {
    "start": "react-native start",
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "test": "jest"
  "jest": {
    "preset": "react-native"
  "dependencies": {
    "@babel/core": "^7.0.0-rc.1",
    "@babel/preset-env": "^7.0.0-rc.1",
    "@babel/preset-react": "^7.0.0-rc.1",
    "jail-monkey": "^1.0.0",
    "prop-types": "^15.6.2",
    "react": "16.3.1",
    "react-native": "^0.55.4",
    "react-native-device-info": "^0.22.4",
    "react-native-elements": "^0.19.1",
    "react-native-firebase": "^4.3.8",
    "react-native-modal": "^6.5.0",
    "react-native-router-flux": "^4.0.1",
    "react-native-size-matters": "^0.1.2",
    "react-native-vector-icons": "^5.0.0",
    "react-redux": "^5.0.7",
    "redux": "^4.0.0",
    "redux-thunk": "^2.3.0"
  "rnpm": {
    "assets": [
      "./assets/fonts/"
Any pointers would be greatly appreciated here...
                Thanks! This solved my issue. I need to do the installation and uninstallation step locally in my repository as well!
– Jasmin Virdi
                Dec 30, 2020 at 22:56
Looks like you need to install babel-core as the docs suggest:
https://jestjs.io/docs/en/getting-started#using-babel
yarn add --dev babel-jest babel-core@^7.0.0-bridge.0 @babel/core regenerator-runtime
Sometimes its because you have installed both babel-cli and babel/cli, or babel-core and @babel/core
It causes conflicts 
1) delete node_modules
2) remove babel-cli, babel-core from your package.json, keep @babel/core, @babel/cli
3) npm install
babel-cli conflicts with @babel/cli
bable-core conflicts with @babel/core
                Thank you!. For me, this meant to remove the require('babel-register') and require('@babel/polyfill/noConflict') from my globalSetup file.
– oyalhi
                Mar 13, 2019 at 17:45
                Upgrading to Jest v24 worked for me, without need for babel-core@^7.0.0-bridge.0 (which actually did not work). Having tried both, I feel like this should be the accepted answer in 2019.
– Stephen Shank
                Jul 17, 2019 at 19:34
Remove jest and @babel/core from package.json (keep babel-core v7 bridge)
Remove node_modules and package-lock.json
npm install
npm install jest @babel/core --save-dev
From the Babel Docs, I found that there is an issue with the order in which you install the deps.
Note: Please install @babel/cli and @babel/core first before npx babel, otherwise npx will install out-of-dated babel 6.x.
As per the usage docs. I found that removing both items from package.json and adding them in order, fixed my issue. Bizarre edge case.
The issue on my side was a conflict between babel-core, imported by babel-register, and @babel/core, required by Babel documentation for latest usage and set as root npm dependency
It seems babel-register has been moved to @babel/register. Babel didn't update docs with the new module name although they did for their cli/core packages
Here is an update of setup babel doc that works for me:
Installation
npm install --save-dev @babel/register
Usage
In your package.json file make the following changes:
  "scripts": {
    "test": "mocha --require @babel/register"
you need this 4 packages, that will fix the issue:
 npm install @babel/cli
 npm install @babel/core
 npm install @babel/node
 npm install @babel/preset-env
In my case, the issue was caused by upgrading my @babel/core version, while I kept an outdated webpack (and/or webpack-cli, I simply treated them identically in batch) version. I happened to be using a Webpack config file that was webpack.config.babel.js. Webpack seems to deal with this internally by using babel-register (see this SO answer). This was evidenced by my require stack:
at OptionManager.mergePresets (/Users/me/Projects/github-wide-mode/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
    at OptionManager.mergeOptions (/Users/me/Projects/my-project/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
    at OptionManager.init (/Users/me/Projects/my-project/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
    at compile (/Users/me/Projects/my-project/node_modules/babel-register/lib/node.js:103:45)
    at loader (/Users/me/Projects/my-project/node_modules/babel-register/lib/node.js:144:14)
    at Object.require.extensions.<computed> [as .js] (/Users/me/Projects/my-project/node_modules/babel-register/lib/node.js:154:7)
                                                                                                 ^^^^^^^^^^^^^^
    at require (/Users/me/Projects/my-project/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at WEBPACK_OPTIONS (/Users/me/Projects/my-project/node_modules/webpack-cli/bin/utils/convert-argv.js:114:13)
    at requireConfig (/Users/me/Projects/my-project/node_modules/webpack-cli/bin/utils/convert-argv.js:116:6)
So webpack-cli was calling babel-register – whose version I presume was dictated by the outdated version of webpack-cli – causing it to target an older version of @babel/babel-core than I had installed.
The solution
I uninstalled the webpack and webpack-cli packages, deleted my node_modules/ and package-lock.json, and then did a fresh npm install.
If this doesn't immediately work, I would suggest following the suggestion included in the error:
Error: 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.
to pinpoint what is causing (what is most likely) the dependency mismatch. I would also recommend deleting entries in your package.json's dependencies (and/or devDependencies) and then reinstalling them at the npm defaulted version, until they play nice with each other. Stripping away non-essential dependencies and resetting default dependencies should eventually work.
                As a side note for anyone else who happens to be dep-upgrading an antique package setup that uses webpack.config.babel.js: babel-register seems to have been included with older versions of webpack or webpack-cli, but is dropped in more recent version. This causes webpack-cli to complain of 'Unable to use specified module loaders for ".babel.js".' Simply install @babel/register in that case.
– zr0gravity7
                Aug 23, 2021 at 1:25
It is NOT recommended to install babel globally. It might be that your IDE has recognized your globally installed package and is going based off of that one. Or what is more likely is that you have have packages that conflict with each other. e.g babel-cli conflicts with @babel/cli
While you can install Babel CLI globally on your machine, it's much better to install it locally project by project.
yarn remove global @babel/cli @babel/core
In project directory...
yarn remove babel-cli 
yarn add @babel/cli @babel/core @babel/node --dev
I accidentally had a file called .babelrc in my root directory with the following contents:
  "presets": ["@babel/preset-env"]
After I deleted that file, I no longer got this error when running my gulp command.
Sometimes, you have a local version, so remove it so that the global version is ran:
npm uninstall babel-cli
npm uninstall babel-core
What is the output of npm ls babel-core?
This was mine, so I removed babel-cli@6.26.0 and babel-register@6.26.0 from package.json, and installed @babel/cli and @babel/register
It might be a good idea to delete your lock file and rebuild it.
                This is a duplicate answer, thus subject to deletion (RE answer by KushalSeth). Welcome to SO. There are some unique rules for the SO platform that you may not be aware of: Useful answers should be upvoted, NOT duplicated for SO to work as intended. It is a different format from forums. You can read more at StackOverflow.com/help.
– SherylHohman
                Apr 19, 2021 at 20:25
        Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.