Error after upgrading to Babel 7: Requires Babel "^7.0.0-0", but was loaded with "6.26.3"

Question

I upgraded to Babel 7 using https://github.com/babel/babel-upgrade and now have an error relating to grunt/browserify.

In grunt file:

browserify: {
  options: {
    watch: true,
    transform: [['babelify', {
      presets: ['@babel/preset-env', '@babel/preset-react'],
      plugins: [
        ['@babel/plugin-transform-react-jsx', {'pragma':'h'}]
      ],
    }]],
    browserifyOptions: {
      standalone: 'Viewer', // Set name of package as window global when no package system is present
      debug: true           // Enables Source Maps
    }
  },
  all: {
    options: {
      watch: true,          // Listen for incremental changes to files (fast incremental build)
    },
    files: {
      ...
    }
  }
} . . .

I get the following error on 'browserify:all' :

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: "XXXX") while parsing file: "XXXXXX"

Can someone help me to resolve this showstopper?

package.json:

 "devDependencies": {
"@babel/core": "^7.0.0",
"@babel/plugin-proposal-class-properties": "^7.0.0",
"@babel/plugin-proposal-decorators": "^7.0.0",
"@babel/plugin-proposal-do-expressions": "^7.0.0",
"@babel/plugin-proposal-export-default-from": "^7.0.0",
"@babel/plugin-proposal-export-namespace-from": "^7.0.0",
"@babel/plugin-proposal-function-bind": "^7.0.0",
"@babel/plugin-proposal-function-sent": "^7.0.0",
"@babel/plugin-proposal-json-strings": "^7.0.0",
"@babel/plugin-proposal-logical-assignment-operators": "^7.0.0",
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
"@babel/plugin-proposal-numeric-separator": "^7.0.0",
"@babel/plugin-proposal-optional-chaining": "^7.0.0",
"@babel/plugin-proposal-pipeline-operator": "^7.0.0",
"@babel/plugin-proposal-throw-expressions": "^7.0.0",
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
"@babel/plugin-syntax-import-meta": "^7.0.0",
"@babel/plugin-transform-react-jsx": "^7.3.0",
"@babel/preset-env": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^23.6.0",
"grunt-browserify": "^5.3.0",
"jest": "^23.5.0",
"jsdom": "^12.1.0"

},

"dependencies": {
"@tweenjs/tween.js": "^17.3.0",
"autoprefixer": "^6.7.5",
"babelify": "^7.3.0",
"browserify": "^13.1.0",
"cssnano": "^3.10.0",
"diff-arrays-of-objects": "^1.1.2",
"eslint": "^3.7.1",
"eslint-plugin-react": "^6.10.3",
"filesize": "^3.6.1",
"grunt": "^1.0.2",
"grunt-contrib-uglify-es": "^3.3.0",
"grunt-contrib-watch": "^1.0.0",
"grunt-env": "^0.4.4",
"grunt-eslint": "^19.0.0",
"grunt-open": "^0.2.4",
"grunt-postcss": "^0.8.0",
"grunt-sass": "^2.1.0",
"mathjs": "^5.4.0",
"p-queue": "^3.0.0",
"preact": "^8.2.7",
"preact-range-slider": "^0.2.0",
"preact-redux": "^2.0.1",
"redux": "^3.6.0",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.2.0",
"redux-undo": "^1.0.0-beta9-9-7",
"tslib": "^1.9.0",
"tween": "^0.9.0"

}

did you run npm install? – epascarello Apr 05 '19 at 19:21 — epascarello, Apr 05 '19 at 19:21

score 2 · Answer 1 · answered Jul 18 '19 at 00:41

1- Delete node modules

npm install rimraf -g
rimraf node_modules

2- Upgrade "babelify": "^7.3.0" to "babelify": "^9.0.0" (Babelify 7.3.0 loads babel-core v 6.26.3)

3- Change "babel-preset-es2015" and "babel-preset-react to

"@babel/preset-env": "^7.5.5",
"@babel/preset-react": "^7.0.0"

(if you use them)

4- In .babelrc change "presets": ["react", "es2015"] to "presets": ["@babel/preset-env", "@babel/preset-react"] (if you use them)

5-npm install

score 0 · Answer 2 · answered Apr 05 '19 at 19:25

0

Try deleting your node_modules folder and then rerunning npm install - this should remove any dependency remants from when you were on an older version.

answered Apr 05 '19 at 19:25

nicktu12

129
4

score 0 · Answer 3 · answered Jul 04 '20 at 14:36

When you run your grunt file it is looking for babel-register. However, for babel 7.0.0 and higher, you need it to look for @babel/register. So you need to install @babel/register and it should work without any further action from you.

npm install --save-dev @babel/register

Error after upgrading to Babel 7: Requires Babel "^7.0.0-0", but was loaded with "6.26.3"

3 Answers3