Webpack-cli: Unable to use webpack-cli with @babel/core and babel-loader "^7.1.3"

[esakkik]

Unable to use webpack-cli with @babel/core and babel-loader "^7.1.3" and since webpack-cli uses jscodeshift which intern uses babel-register "^6.9.0" and babel-core "^6.26.0" which is causing the following issue when used along with @babel/core "^7.0.0-beta.40"

ISSUE: Module build failed: TypeError: Cannot read property 'loose' of undefined (While processing preset: "/node_modules/@babel/preset-env/lib/index.js")

Issue has been raised in the @babel/core but according this (https://github.com/babel/babel/issues/7110#issuecomment-354583771) it might be due to use of babel version 6 by some dependencies

using the following config

// package.json

"dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0-beta.40",
    "@babel/preset-env": "^7.0.0-beta.40",
    "@babel/preset-flow": "^7.0.0-beta.40",
    "@babel/preset-react": "^7.0.0-beta.40",
    "babel-loader": "^7.1.3",
    "html-webpack-plugin": "webpack-contrib/html-webpack-plugin",
    "webpack": "^4.0.1",
    "webpack-cli": "^2.0.9"
  },
  "babel": {
    "presets": [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": [
            "last 2 versions",
            "safari >= 7"
          ]
        }
      }
    ]
  }

// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

// plugins
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
  template: './src/index.html',
  filename: 'index.html',
  inject: 'body',
});

module.exports = {
  entry: {
    main: ['./src/index.js'],
    vendor: ['react', 'react-dom']
  },
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: '[name].js',
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  plugins: [
    HtmlWebpackPluginConfig
  ],
  target: 'web'
};

[HJava]

I have the same issue. my package.json file:

{
  "name": "dxSDK",
  "dependencies": {
    "eventemitter3": "^3.0.1",
    "history": "^4.7.2",
    "immutable": "^3.8.2",
    "koa": "^2.5.0",
    "koa-router": "^7.4.0",
    "koa-static": "^3.0.0",
    "koa-views": "^6.1.4",
    "prop-types": "^15.6.1",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-redux": "^5.0.7",
    "react-router": "^4.2.0",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0",
    "semver": "^5.5.0"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0-beta.40",
    "@babel/plugin-proposal-export-default-from": "^7.0.0-beta.40",
    "@babel/polyfill": "^7.0.0-beta.40",
    "@babel/preset-env": "^7.0.0-beta.40",
    "@babel/preset-react": "^7.0.0-beta.40",
    "@babel/preset-stage-0": "^7.0.0-beta.40",
    "autoprefixer": "^6.7.7",
    "babel-loader": "^8.0.0-beta.2",
    "cache-loader": "^1.2.1",
    "css-loader": "^0.27.3",
    "happypack": "^4.0.1",
    "postcss-loader": "^1.3.3",
    "postcss-smart-import": "^0.6.10",
    "precss": "^1.4.0",
    "style-loader": "^0.14.1",
    "webpack": "^4.0.1",
    "webpack-cli": "^2.0.9",
    "webpack-dev-server": "^3.1.0"
  }
}

[evenstensberg]

This is quite unfortunate 👎 I'll check if there's something we can do

[ematipico]

Babel 7 is still in beta! Shouldn't we wait a RC in order to start addressing issues?

Once RC will be released there won't be any API changes and disruptions apart bug fixes. I'd suggest to lower the priority on this task.

[evenstensberg]

Maybe @hzoo has some input?

[hzoo]

So via https://github.com/babel/babel-upgrade

"devDependencies": {
  "@babel/core": "7.0.0-beta.39",
+ "babel-core": "7.0.0-bridge.0",
  "jest": "^22.0.0"
},
"scripts": {
  "test": "jest"
}

the solution is to add a new dep on "babel-core": "7.0.0-bridge.0", which interally uses @babel/core. This is what is done for jest. It might still not work if the module itself isn't compatible with v7 though so would need some patches to jscodeshift.

[HJava]

I try to install babel-core, but the problem isn't solved. It has the same logs.

[dmbfm]

Adding the babel-core bridge does not solve this. The problem is still present.

I'm getting this:

Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.0". 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.

because of the [email protected] that gets installed by webpack-cli it seems.

[ematipico]

Thing is that cli doesn't have any dependency from Babel. It's a dep of a dep, jscodeshift if we want to be more specific. Now I wonder if this is an issue related to that library

[ponyloop]

It seems that yarn add [email protected] or npm install [email protected] may help. At least it works for me.

[waxlamp]

I just ran into this problem, but I solved it by also installing @babel/register as a dependency.

[HJava]

I install @babel/register and solve the problem~~

[ematipico]

@esakkikrishnan could you try to install @babel/register ?

[yekver]

I fixed this problem with: "babel-loader": "^8.0.0-beta"

[AdrienLemaire]

Having the issue

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 s
ee what is calling Babel.            

with all @babel packages at ^7.0.0 and babel-loader@^8.0.0

The traceback points to v8-compile-cache

    at Object.require.extensions.(anonymous function) [as .js] (/home/dori/Projects/work/miraidenshi/gounite/GOunite-xpc/node_modules/babel-register/lib/node.js:154:7)                                                  
    at Module.load (internal/modules/cjs/loader.js:599:32)                                                  
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)                                                
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)                                         
    at Module.require (internal/modules/cjs/loader.js:637:17)                                               
    at require (/home/dori/Projects/work/miraidenshi/gounite/GOunite-xpc/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at WEBPACK_OPTIONS (/home/dori/Projects/work/miraidenshi/gounite/GOunite-xpc/node_modules/webpack-cli/bin/convert-argv.js:133:13)

and sure enough, it uses babel 6.26.3.

Installing @babel/register fixes that specific issue, but it becomes a peer dependency to webpack-cli

Also, my issues keep going on with the plugin-transform-runtime failing due to an unwanted polyfill option received

Error: [BABEL] /home/dori/Projects/work/project/webpack.config.babel.js: The 'polyfill' option has been removed. The @babel/runtime module now skips polyfilling by default. (While processing: "/home/dori/Projects/work/project/node_modules/@babel/plugin-transform-runtime/lib/index.js")
    at _default (/home/dori/Projects/work/project/node_modules/@babel/plugin-transform-runtime/lib/index.js:126:13)
    at /home/dori/Projects/work/project/node_modules/@babel/helper-plugin-utils/lib/index.js:19:12
    at loadDescriptor (/home/dori/Projects/work/project/node_modules/@babel/core/lib/config/full.js:165:14)
    at cachedFunction (/home/dori/Projects/work/project/node_modules/@babel/core/lib/config/caching.js:33:19)
    at loadPluginDescriptor (/home/dori/Projects/work/project/node_modules/@babel/core/lib/config/full.js:200:28)
    at config.plugins.reduce (/home/dori/Projects/work/project/node_modules/@babel/core/lib/config/full.js:69:20)
    at Array.reduce (<anonymous>)
    at recurseDescriptors (/home/dori/Projects/work/project/node_modules/@babel/core/lib/config/full.js:67:38)
    at loadFullConfig (/home/dori/Projects/work/project/node_modules/@babel/core/lib/config/full.js:108:6)
    at loadOptions (/home/dori/Projects/work/project/node_modules/@babel/core/lib/config/index.js:27:36)
    at OptionManager.init (/home/dori/Projects/work/project/node_modules/@babel/core/lib/index.js:215:36)
    at compile (/home/dori/Projects/work/project/node_modules/@babel/register/lib/node.js:61:42)
    at compileHook (/home/dori/Projects/work/project/node_modules/@babel/register/lib/node.js:102:12)
    at Module._compile (/home/dori/Projects/work/project/node_modules/pirates/lib/index.js:77:29)
    at Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Object.newLoader [as .js] (/home/dori/Projects/work/project/node_modules/pirates/lib/index.js:88:7)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (/home/dori/Projects/work/project/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at WEBPACK_OPTIONS (/home/dori/Projects/work/project/node_modules/webpack-cli/bin/convert-argv.js:133:13)
    at requireConfig (/home/dori/Projects/work/project/node_modules/webpack-cli/bin/convert-argv.js:135:6)
    at /home/dori/Projects/work/project/node_modules/webpack-cli/bin/convert-argv.js:142:17
    at Array.forEach (<anonymous>)
    at module.exports (/home/dori/Projects/work/project/node_modules/webpack-cli/bin/convert-argv.js:140:15)
    at yargs.parse (/home/dori/Projects/work/project/node_modules/webpack-cli/bin/cli.js:241:39)
    at Object.parse (/home/dori/Projects/work/project/node_modules/yargs/yargs.js:563:18)
    at /home/dori/Projects/work/project/node_modules/webpack-cli/bin/cli.js:219:8
    at Object.<anonymous> (/home/dori/Projects/work/project/node_modules/webpack-cli/bin/cli.js:530:3)

[evenstensberg]

@Fandekasp most likely one of your dependencies are lower than 7

[AdrienLemaire]

@ev1stensberg the traceback tells us that webpack-cli calls v8-compile-cache which requires babel 6, but you believe I have another unrelated package which, although not mentioned in the traceback is the cause for this issue.
This certainly makes debugging more difficult.

I used babel-upgrade to update my package.json, then went on to update some other packages as I fixed errors thrown out by webpack.

My current list of babel dependencies is as follow:

  "dependencies": {
    "@babel/runtime": "^7.0.0",
  },
  "devDependencies": {
    "@babel/cli": "^7.0.0",
    "@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-object-rest-spread": "^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-runtime": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-flow": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "@babel/register": "^7.0.0",
    "babel-eslint": "9.0.0",
    "babel-jest": "23.4.2",
    "babel-loader": "^8.0.0",
    "babel-plugin-root-import": "^5.1.0",
    "babel-plugin-styled-components": "1.6.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.5",
    "babel-preset-react-app": "3.1.2",
  }

I thought I went through the remaining babel-* packages to insure they were babel 7 compliant, but .. I'll check another time

edit: [email protected] doesn't support babel 7 (cf this issue), but upgrading to 6.1.0 doesn't fix the issue which keeps coming back to v8-compile-cache and webpack-cli in the traceback.

[ematipico]

If you believe to have issues between Babel versions, try to install this package

npm install -D [email protected]

This usually fixes the problem between two versions among different dependencies that use different major versions of babel

[AdrienLemaire]

Unfortunately, I keep having this The 'polyfill' option has been removed. error.

[AdrienLemaire]

Sorry about that, I could resolve the issue. Basically, I had created a babel.config.js file and moved all my .babelrc config over there. But since I had written the webpack.config.babel.js config file with es6 including stuff like spread syntax, the build would fail because babel wasn't loaded at the time of reading the webpack config file. And when I reverted that deletion, I missed the polyfill option that remained there (moreover it being a .* file, it probably also escaped my search queries).
Solution was to remove babel.config.js and update the .babelrc file properly.

[JamesTheHacker]

The most common reason for this issue is having the wrong babel-core installed. For version 7 you need to use @babel/core as opposed to babe/core.

npm uninstall babe-core
npm install @babel/core

[Wkasel]

I ran into the same issue, and my fix was to add @babel/register

Referenced from above link to other issue:
https://github.com/babel/babel/issues/7110#issuecomment-372155709