Migrate to babel 7: Requires Babel "^7.0.0-0", but was loaded with "6.26.3" #8206

budarin · 2018-06-21T14:12:07Z

Bug Report

Current Behavior
I've tried to move to Babel 7 on existing simple project.
When I've finished migration I've got the error:

  throw Object.assign(err, {
  ^
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.

Babel config for transformation the app is in /config/babelLoaderConfig.js
Here is link for the repository

Environment

Babel version(s): v7.0.0-beta.51
Node/npm version: Node 10.4./npm 6
OS: Windows 7
Monorepo yes
How you are using Babel: loader

The text was updated successfully, but these errors were encountered:

babel-bot · 2018-06-21T14:12:10Z

Hey @budarin! We really appreciate you taking the time to report an issue. The collaborators
on this project attempt to help as many people as possible, but we're a limited number of volunteers,
so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack
community that typically always has someone willing to help. You can sign-up here
for an invite.

xtuc · 2018-06-21T14:16:13Z

I think that you're loading a plugin that uses Babel 6 which is not compatible with Babel 7.

budarin · 2018-06-21T14:16:48Z

@xtuc
What is the solution?
Move back?

ajliv · 2018-06-21T15:09:14Z

@budarin try installing babel-core@7.0.0-bridge.0 alongside @babel/core and then adding this to your package.json --

"resolutions": {
    "babel-core": "7.0.0-bridge.0"
}

budarin · 2018-06-21T15:10:52Z

@ajliv
I've tried but with the same error :(

loganfsmyth · 2018-06-21T16:55:10Z

As mentioned in the error itself, the stack trace is the important part here to diagnose the issue. Please include that.

budarin · 2018-06-21T17:26:14Z

Here is full log:

d:\Projects\react-bootstrap-project\node_modules\babel-core\lib\transformation\file\options\option-manager.js:180
          throw new ReferenceError(messages.get("pluginUnknown", plugin, loc, i, dirname));
          ^

ReferenceError: Unknown plugin "@babel/plugin-syntax-dynamic-import" specified in "d:\\Projects\\react-bootstrap-project\\.babelrc" at 0, attempted to resolve relative to "d:\\Projects\\react-bootstrap-project"
    at d:\Projects\react-bootstrap-project\node_modules\babel-core\lib\transformation\file\options\option-manager.js:180:17
    at Array.map (<anonymous>)
    at Function.normalisePlugins (d:\Projects\react-bootstrap-project\node_modules\babel-core\lib\transformation\file\options\option-manager.js:158:20)
    at OptionManager.mergeOptions (d:\Projects\react-bootstrap-project\node_modules\babel-core\lib\transformation\file\options\option-manager.js:234:36)
    at OptionManager.init (d:\Projects\react-bootstrap-project\node_modules\babel-core\lib\transformation\file\options\option-manager.js:368:12)
    at compile (d:\Projects\react-bootstrap-project\node_modules\babel-register\lib\node.js:103:45)
    at loader (d:\Projects\react-bootstrap-project\node_modules\babel-register\lib\node.js:144:14)
    at Object.require.extensions.(anonymous function) [as .js] (d:\Projects\react-bootstrap-project\node_modules\babel-register\lib\node.js:154:7)
    at Module.load (internal/modules/cjs/loader.js:612:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:551:12)

budarin · 2018-06-21T17:28:19Z

Repo is changed (I have undo babel7 modifications to Babel 6), but you cold do checkout the head to reproduce the error

git checkout 957fc9df5dc6807c22f59ea0f65a4247532f0e70

loganfsmyth · 2018-06-21T17:34:08Z

Yeah, so you have babel-register which is Babel 6. It would be @babel/register for Babel 7.

budarin · 2018-06-21T17:36:36Z

@loganfsmyth
I have not babel-register in package.json!

    "devDependencies": {
        "@babel/cli": "^7.0.0-beta.51",
        "@babel/core": "^7.0.0-beta.51",
        "@babel/plugin-proposal-class-properties": "^7.0.0-beta.51",
        "@babel/plugin-proposal-object-rest-spread": "^7.0.0-beta.51",
        "@babel/plugin-syntax-dynamic-import": "^7.0.0-beta.51",
        "@babel/plugin-transform-react-constant-elements": "^7.0.0-beta.51",
        "@babel/plugin-transform-react-inline-elements": "^7.0.0-beta.51",
        "@babel/plugin-transform-react-jsx-self": "^7.0.0-beta.51",
        "@babel/plugin-transform-react-jsx-source": "^7.0.0-beta.51",
        "@babel/preset-env": "^7.0.0-beta.51",
        "@babel/preset-react": "^7.0.0-beta.51",
        "babel-core": "^7.0.0-bridge.0",
        "babel-jest": "^23.0.1",
        "babel-loader": "^7.1.4",
        "babel-minify-webpack-plugin": "^0.3.1",
        "babel-plugin-external-helpers": "^6.22.0",
        "babel-plugin-lodash": "^3.3.4",
        "copy-webpack-plugin": "^4.5.1",
        "css-loader": "^0.28.11",
        "enzyme": "^3.3.0",

jsg2021 · 2018-06-21T17:41:47Z

@budarin you have babel-core twice with different values. Try deleting the line:

"babel-core": "^6.26.3",

loganfsmyth · 2018-06-21T17:45:50Z

@budarin Since you're using a webpack.config.babel.js file, Webpack loads babel-register/@babel/register automatically, but since you don't have it in you deps you're basically accidentally relying on npm to flatten your dependencies and you're getting one by chance.

budarin · 2018-06-21T17:45:57Z

@jsg2021
I have no "babel-core": "^6.26.3", - it's error while copy from commit log - not remove removed line

budarin · 2018-06-21T17:49:48Z

@loganfsmyth
Should I manually install @babel/register to resolve the problem?

loganfsmyth · 2018-06-21T17:52:21Z

Yep!

budarin · 2018-06-21T18:01:10Z

@loganfsmyth
It's little bit better :)
But it does not support syntax in webpack.config.babel.js:

> Executing task: npm run start <


> minimal-react-webpack-babel-setup@1.0.0 start d:\Projects\react-bootstrap-project
> webpack-dev-server --mode development --config ./config/webpack.config.babel.js

@babel/preset-env: `DEBUG` option

Using targets:
{
  "node": "10.4.1"
}

Using modules transform: false

Using plugins:
  proposal-async-generator-functions { "node":"10.4.1" }
  syntax-object-rest-spread { "node":"10.4.1" }
  proposal-unicode-property-regex { "node":"10.4.1" }

Using polyfills: No polyfills were added, since the `useBuiltIns` option was not set.
d:\Projects\react-bootstrap-project\config\webpack.config.babel.js:1
(function (exports, require, module, __filename, __dirname) { import fs from 'fs';
                                                                     ^^

SyntaxError: Unexpected identifier
    at new Script (vm.js:74:7)
    at createScript (vm.js:246:10)
    at Object.runInThisContext (vm.js:298:10)
    at Module._compile (internal/modules/cjs/loader.js:670:28)
    at Module._compile (d:\Projects\react-bootstrap-project\node_modules\pirates\lib\index.js:91:24)
    at Module._extensions..js (internal/modules/cjs/loader.js:713:10)
    at Object.newLoader [as .js] (d:\Projects\react-bootstrap-project\node_modules\pirates\lib\index.js:96:7)
    at Module.load (internal/modules/cjs/loader.js:612:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
    at Function.Module._load (internal/modules/cjs/loader.js:543:3)

budarin · 2018-06-21T18:30:36Z

Above error was due to env's config for node - I've removed lines:

                 "modules": false,
                "useBuiltIns": false

and webpack.config.babel.js is compiled

Thanks a lot!

gogulanareshkw · 2018-08-01T07:14:22Z

please help me to resolve compatibilty issue.

"dependencies": {
"@babel/core": "^7.0.0-beta.55",
"@babel/preset-env": "^7.0.0-beta.55",
"@babel/preset-react": "^7.0.0-beta.55",
"native-base": "^2.6.1",
"react": "^16.4.1",
"react-native": "^0.55.4",
"react-native-code-push": "^5.4.1",
"react-native-vector-icons": "^4.6.0",
},
"devDependencies": {
"babel-eslint": "^6.1.2",
"babel-jest": "^23.4.2",
"babel-preset-react-native": "^4.0.0",
"chai": "^3.5.0",
"eslint": "^3.5.0",
"eslint-config-airbnb": "^11.1.0",
"eslint-plugin-import": "^1.14.0",
"eslint-plugin-jsx-a11y": "^2.2.1",
"eslint-plugin-react": "^6.2.0",
"eslint-plugin-react-native": "^2.0.0",
"jest": "17.0.0",
"jest-react-native": "17.0.0",
"mocha": "^2.5.3",
},

rohan0793 · 2018-09-09T10:33:35Z

npm install babel-loader babel-core@^7.0.0-bridge @babel/core --save-dev

Worked like a charm

https://www.npmjs.com/package/babel-core/v/7.0.0-bridge.0

vincro · 2018-09-21T10:31:46Z

like @rohan0793 this fixed my issues without killing my builds elsewhere.

budarin · 2018-09-21T10:37:06Z

for packages required babel 6 just install babel-core@^7.0.0-bridge

This is a current issue using babel7 with babel-jest, we need to have the babel-core bridge to fix that issue about a babel6 usage. See babel/babel#8206 (comment)

nickjuntilla · 2018-11-26T21:55:57Z

None of this appears to be working for me. The state of my dependencies:

"dependencies": {
    "@babel/plugin-transform-react-jsx-source": "^7.0.0",
    "@expo/vector-icons": "^6.3.1",
    "@shoutem/ui": "^0.23.4",
    "email-validator": "^1.1.1",
    "expo": "^31.0.0",
    "firebase": "^4.9.1",
    "lodash": "^4.17.10",
    "moment": "^2.22.2",
    "prop-types": "^15.6.2",
    "qs": "^6.5.1",
    "react": "16.6.3",
    "react-native": "^0.55.2",
    "react-native-dropdownalert": "^3.4.0",
    "react-native-elements": "^0.19.1",
    "react-native-extended-stylesheet": "^0.8.1",
    "react-native-fit-image": "^1.5.4",
    "react-native-fs": "^2.10.14",
    "react-native-gifted-chat": "^0.4.3",
    "react-native-iphone-x-helper": "^1.0.2",
    "react-native-keyboard-aware-scroll-view": "^0.7.0",
    "react-native-local-storage": "^1.5.2",
    "react-native-material-dropdown": "^0.11.1",
    "react-native-modal": "^6.1.0",
    "react-native-qrcode": "^0.2.6",
    "react-native-router-flux": "^4.0.6",
    "react-native-snap-carousel": "^3.7.5",
  },
  "devDependencies": {
    "@babel/cli": "^7.0.0",
    "@babel/core": "^7.1.6",
    "@babel/plugin-proposal-decorators": "^7.1.6",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^9.0.0",
    "babel-loader": "^8.0.4",
    "babel-preset-react-app": "^6.1.0",
    "eslint": "^4.19.1",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-config-react-app": "^2.1.0",
    "eslint-plugin-flowtype": "2.39.1",
    "eslint-plugin-import": "^2.12.0",
    "eslint-plugin-jsx-a11y": "^5.1.1",
    "eslint-plugin-react": "^7.9.1",
    "react-test-renderer": "16.6.0-alpha.8af6728"
  },

nickjuntilla · 2018-11-27T02:25:03Z

I solved this by starting a new project and copying over the dependencies. Notably "babel-preset-expo": "^5.0.0", was not in my old project dependencies.

jkalina · 2018-12-05T23:00:16Z

For me, adding
"resolutions": { "babel-core": "^7.0.0-bridge" }
solved this issue.

harmnot · 2019-02-22T17:52:49Z

I have same issues like that and I already follow some methods on this conversions, but still get error like the first issues Budarin said

seyaobey · 2019-03-01T13:06:04Z

Same issue here!

budarin · 2019-03-01T13:38:06Z

Just add "babel-core": "^7.0.0-bridge.0", to your dependencies in packaje.json!

harmnot · 2019-03-04T02:57:26Z

it solved by adding this .babelrc

{
  "presets": [
    "@babel/preset-env"
  ]
}

and then on package json ,
"start": "nodemon --exec babel-node index.js",

and don't forget to add new babel

ziedHamdi · 2019-05-10T04:59:20Z

Same issue here:

my babel.rc

{
  "presets": [
    "node8",
    "@babel/preset-env"
  ],
  "plugins": [
    [
    "@babel/plugin-transform-react-jsx",
    ]
  ],
  "ignore": [
    "**/dist",
    "**/build1",
    "**/node_modules"
  ]
}

my package.json

{
  "name": "rexpack",
  "version": "1.0.0",
  "description": "Expack is the bare-bones Express and Webpack boilerplate with ES6+ babel transpilation, ESLint linting, Hot Module Reloading, and Jest test framework enabled.",
  "main": "index.js",
  "devtool": "eval-source-map",
  "scripts": {
    "test": "jest",
    "coverage": "jest --coverage",
    "build": "babel . --out-dir dist --source-maps --ignore **/node_modules",
    "postbuild": "deploy.bat",
    "buildDev": "del /S /Q .\\dist\\server.js & webpack --mode development --config webpack.server.config.js",
    "buildDevLnx": "rm -rf ./dist/server.js & webpack --mode development --config webpack.server.config.js",
    "buildProd": "del /S /Q dist && webpack --mode production --config webpack.server.config.js",
    "buildProdLnx": "rm -rf dist && webpack --mode production --config webpack.server.config.js",
    "start": "node ./dist/server.js",
    "startDev": "set NODE_ENV=development && node ./starter.js"
  },
  "repository": "https://github.com/bengrunfeld/rexpack",
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/core": "^7.4.4",
    "@babel/register": "^7.4.4",
    "@google/maps": "^0.5.5",
    "babel-plugin-transform-runtime": "^7.0.0-beta.3",
    "babel-polyfill": "^7.0.0-beta.3",
    "body-parser": "^1.19.0",
    "cors": "^2.8.5",
    "csv-parse": "^4.4.1",
    "dotenv": "^8.0.0",
    "ejs": "^2.6.1",
    "express": "^5.0.0-alpha.7",
    "express-fileupload": "^1.1.4",
    "express-graphql": "^0.8.0",
    "express-jwt": "^5.3.1",
    "express-session": "^1.16.1",
    "fb": "^2.0.0",
    "graphql": "^14.3.0",
    "graphql-compose": "^7.0.1",
    "graphql-compose-connection": "^6.0.2",
    "graphql-compose-mongoose": "^7.0.1",
    "graphql-tag": "^2.10.1",
    "jsonwebtoken": "^8.5.1",
    "mongoose": "^5.5.7",
    "passport": "^0.4.0",
    "passport-facebook": "^3.0.0",
    "path": "^0.12.7",
    "q": "^1.5.1",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "sharp": "^0.22.1",
    "source-map-support": "^0.5.12",
    "stripe": "^6.34.0"
  },
  "engines": {
    "node": ">=4.3.2"
  },
  "jest": {
    "moduleNameMapper": {
      "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js",
      "\\.(gif|ttf|eot|svg)$": "<rootDir>/__mocks__/fileMock.js"
    }
  },
  "babel": {
    "presets": [
      "node8",
      "@babel/preset-env"
    ]
  },
  "devDependencies": {
    "@babel/plugin-transform-react-jsx": "^7.3.0",
    "babel-cli": "^7.0.0-beta.3",
    "babel-eslint": "^11.0.0-beta.0",
    "babel-loader": "^8.0.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-node8": "^1.2.0",
    "babel-preset-react": "^7.0.0-beta.3",
    "css-loader": "^2.1.1",
    "enzyme": "^3.9.0",
    "enzyme-adapter-react-16": "^1.12.1",
    "eslint": "^6.0.0-alpha.0",
    "eslint-loader": "^2.1.2",
    "eslint-plugin-react": "^7.13.0",
    "file-loader": "^3.0.1",
    "html-loader": "^1.0.0-alpha.0",
    "html-webpack-plugin": "^4.0.0-beta.5",
    "jest": "^24.8.0",
    "mini-css-extract-plugin": "^0.6.0",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "style-loader": "^0.23.1",
    "uglifyjs-webpack-plugin": "^2.1.2",
    "url-loader": "^1.1.2",
    "webpack": "^4.31.0",
    "webpack-cli": "^3.3.2",
    "webpack-dev-middleware": "^3.6.2",
    "webpack-hot-middleware": "^2.24.4",
    "webpack-node-externals": "^1.7.2"
  }
}

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.
    at throwVersionError (D:\work\weally\server\node_modules\@babel\helper-plugin-utils\lib\index.js:65:11)
    at Object.assertVersion (D:\work\weally\server\node_modules\@babel\helper-plugin-utils\lib\index.js:13:11)
    at _default (D:\work\weally\server\node_modules\@babel\plugin-transform-react-jsx\lib\index.js:51:7)
    at D:\work\weally\server\node_modules\@babel\helper-plugin-utils\lib\index.js:19:12
    at Function.memoisePluginContainer (D:\work\weally\node_modules\babel-core\lib\transformation\file\options\option-manager.js:113:13)
    at Function.normalisePlugin (D:\work\weally\node_modules\babel-core\lib\transformation\file\options\option-manager.js:146:32)
    at D:\work\weally\node_modules\babel-core\lib\transformation\file\options\option-manager.js:184:30
    at Array.map (<anonymous>)
    at Function.normalisePlugins (D:\work\weally\node_modules\babel-core\lib\transformation\file\options\option-manager.js:158:20)
    at OptionManager.mergeOptions (D:\work\weally\node_modules\babel-core\lib\transformation\file\options\option-manager.js:234:36)
    at OptionManager.init (D:\work\weally\node_modules\babel-core\lib\transformation\file\options\option-manager.js:368:12)
    at compile (D:\work\weally\node_modules\babel-register\lib\node.js:103:45)
    at loader (D:\work\weally\node_modules\babel-register\lib\node.js:144:14)
    at Object.require.extensions.(anonymous function) [as .js] (D:\work\weally\node_modules\babel-register\lib\node.js:154:7)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.<anonymous> (D:\work\weally\server\starter.js:7:18)
    at Module._compile (internal/modules/cjs/loader.js:701:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! rexpack@1.0.0 startDev: `set NODE_ENV=development && node ./starter.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the rexpack@1.0.0 startDev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Emna\AppData\Roaming\npm-cache\_logs\2019-05-10T04_55_55_182Z-debug.log

vincro · 2019-05-10T09:12:36Z

You need to add:

"babel-core": "^7.0.0-bridge.0",

to your dev dependencies.

qwertyhoge · 2019-05-17T09:17:41Z

In my case, I read the stack trace to find babel-register in the global directory was called, and the global one's version was low so I met this issue.
Then I installed @babel/register in the project directory and that worked.

Samiys · 2019-06-13T17:23:05Z

npm WARN react-starter@1.0.0 No repository field.

getting this error

GavinMoreYoung · 2019-07-13T03:35:04Z

maybe you could install global babel-cli, you can try command : npm uninstall -g babel-cli babel-node.you need install @babel/cli and @babel/node.
OR
you can uninstall node and remove npm file in C:\Users\Administrator\AppData\Roaming
i hope i can help you.good luck

aamurtaza · 2019-07-21T15:04:16Z

It worked for me.
npm uninstall -g babel-cli babel-node
then running
npm install -g @babel/cli @babel/node

It asked to install peer dependencies which was in my case "@babel/core: ^7.0.0 ". I installed it also globally.

budarin closed this as completed Jun 21, 2018

Patrik-Stas mentioned this issue Aug 1, 2018

Fix dependency error when running jest, add missing jest-enzyme HashemKhalifa/webpack-react-boilerplate#10

Merged

ccorcos mentioned this issue Sep 8, 2018

Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.3" FormidableLabs/spectacle#522

Closed

ringtail003 added a commit to ringtail003/run-npm-script-ts that referenced this issue Feb 11, 2019

fix babel/babel#8206

2a0e4b2

fbrckman mentioned this issue Aug 6, 2019

Tests don't work anymore oSoc19/unshacled#123

Open

lock bot added the outdated label Oct 20, 2019

lock bot locked as resolved and limited conversation to collaborators Oct 20, 2019

Migrate to babel 7: Requires Babel "^7.0.0-0", but was loaded with "6.26.3" #8206

Migrate to babel 7: Requires Babel "^7.0.0-0", but was loaded with "6.26.3" #8206

Comments

budarin commented Jun 21, 2018 • edited Loading

Bug Report

babel-bot commented Jun 21, 2018

xtuc commented Jun 21, 2018

budarin commented Jun 21, 2018 • edited Loading

ajliv commented Jun 21, 2018

budarin commented Jun 21, 2018

loganfsmyth commented Jun 21, 2018

budarin commented Jun 21, 2018

budarin commented Jun 21, 2018 • edited Loading

loganfsmyth commented Jun 21, 2018

budarin commented Jun 21, 2018 • edited Loading

jsg2021 commented Jun 21, 2018

loganfsmyth commented Jun 21, 2018 • edited Loading

budarin commented Jun 21, 2018

budarin commented Jun 21, 2018

loganfsmyth commented Jun 21, 2018

budarin commented Jun 21, 2018

budarin commented Jun 21, 2018 • edited Loading

gogulanareshkw commented Aug 1, 2018

rohan0793 commented Sep 9, 2018

vincro commented Sep 21, 2018

budarin commented Sep 21, 2018

nickjuntilla commented Nov 26, 2018 • edited Loading

nickjuntilla commented Nov 27, 2018

jkalina commented Dec 5, 2018

harmnot commented Feb 22, 2019

seyaobey commented Mar 1, 2019

budarin commented Mar 1, 2019

harmnot commented Mar 4, 2019

ziedHamdi commented May 10, 2019 • edited Loading

vincro commented May 10, 2019

qwertyhoge commented May 17, 2019

Samiys commented Jun 13, 2019

GavinMoreYoung commented Jul 13, 2019 • edited Loading

aamurtaza commented Jul 21, 2019

budarin commented Jun 21, 2018 •

edited

Loading

budarin commented Jun 21, 2018 •

edited

Loading

budarin commented Jun 21, 2018 •

edited

Loading

budarin commented Jun 21, 2018 •

edited

Loading

loganfsmyth commented Jun 21, 2018 •

edited

Loading

budarin commented Jun 21, 2018 •

edited

Loading

nickjuntilla commented Nov 26, 2018 •

edited

Loading

ziedHamdi commented May 10, 2019 •

edited

Loading

GavinMoreYoung commented Jul 13, 2019 •

edited

Loading