Skip to content

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

@budarin

Description

@budarin

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

Activity

babel-bot

babel-bot commented on Jun 21, 2018

@babel-bot
Collaborator

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

xtuc commented on Jun 21, 2018

@xtuc
Member

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

budarin

budarin commented on Jun 21, 2018

@budarin
Author

@xtuc
What is the solution?
Move back?

ajliv

ajliv commented on Jun 21, 2018

@ajliv

@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

budarin commented on Jun 21, 2018

@budarin
Author

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

loganfsmyth

loganfsmyth commented on Jun 21, 2018

@loganfsmyth
Member

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

budarin

budarin commented on Jun 21, 2018

@budarin
Author

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

budarin commented on Jun 21, 2018

@budarin
Author

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

loganfsmyth commented on Jun 21, 2018

@loganfsmyth
Member

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

budarin

budarin commented on Jun 21, 2018

@budarin
Author

@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

jsg2021 commented on Jun 21, 2018

@jsg2021

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

"babel-core": "^6.26.3",
loganfsmyth

loganfsmyth commented on Jun 21, 2018

@loganfsmyth
Member

@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

budarin commented on Jun 21, 2018

@budarin
Author

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

budarin

budarin commented on Jun 21, 2018

@budarin
Author

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

loganfsmyth

loganfsmyth commented on Jun 21, 2018

@loganfsmyth
Member

Yep!

14 remaining items

jkalina

jkalina commented on Dec 5, 2018

@jkalina

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

added a commit that references this issue on Feb 11, 2019
harmnot

harmnot commented on Feb 22, 2019

@harmnot

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

seyaobey commented on Mar 1, 2019

@seyaobey

Same issue here!

budarin

budarin commented on Mar 1, 2019

@budarin
Author

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

harmnot

harmnot commented on Mar 4, 2019

@harmnot

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

ziedHamdi commented on May 10, 2019

@ziedHamdi

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

vincro commented on May 10, 2019

@vincro

You need to add:

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

to your dev dependencies.

qwertyhoge

qwertyhoge commented on May 17, 2019

@qwertyhoge

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

Samiys commented on Jun 13, 2019

@Samiys

npm WARN react-starter@1.0.0 No repository field.

getting this error

GavinMoreYoung

GavinMoreYoung commented on Jul 13, 2019

@GavinMoreYoung

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

aamurtaza commented on Jul 21, 2019

@aamurtaza

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.

added
outdatedA closed issue/PR that is archived due to age. Recommended to make a new issue
on Oct 20, 2019
locked as resolved and limited conversation to collaborators on Oct 20, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    outdatedA closed issue/PR that is archived due to age. Recommended to make a new issue

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @loganfsmyth@ajliv@jsg2021@nickjuntilla@xtuc

        Issue actions

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