Babel error -Using removed Babel 5 option

[ghost]

I am a babel newbie, I setup a new project, installed babel, installed react-dnd via bower and my .babelrc has the following line
{ "presets": ["es2015", "stage-0", "react"] }
Module build failed: ReferenceError:

[BABEL] <path>\bower_components\react-dnd\src\index.js: Using removed Babel 5 option: <path>\bower_components\react-dnd\.babelrc.stage - Check out the corresponding stage-x presets http://babeljs.io/docs/plugins/#presets

What am i doing wrong

[billyjanitsch]

Hi @jagan-veeraraghavan! How are you including react-dnd in Bower? You should be doing so like this.

It looks like you might instead be pointing Bower to the entire Github repo. This won't work because it includes .babelrc, a Babel 5 config file incompatible with the version of Babel that you're using (6). The npm distribution omits this file (btw, we suggest using npm over Bower).

If I'm wrong, feel free to reopen the issue. I'd also recommend the gitter room for support questions like this one.

[walter0331]

HI, I ran in to a similar issue, using webpack and babel 6.

ERROR in ./~/dnd-core/lib/index.js
Module build failed: ReferenceError: [BABEL] /node_modules/dnd-core/lib/index.js: 
Using removed Babel 5 option: /node_modules/dnd-core/.babelrc.stage - Check out the corresponding stage-x presets http://babeljs.io/docs/plugins/#presets

here are my settings:

package.json

{
  "devDependencies": {
    "babel-core": "^6.3.26",
    "babel-loader": "^6.2.1",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-preset-stage-0": "^6.5.0",
    "css-loader": "^0.23.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.8.5",
    "jquery": "^2.2.1",
    "less": "^2.6.1",
    "less-loader": "^2.2.2",
    "style-loader": "^0.13.0",
    "url-loader": "^0.5.7",
    "webpack": "^1.12.9",
    "webpack-dev-server": "^1.14.0"
  },
  "dependencies": {
    "babel-polyfill": "^6.3.14",
    "expose-loader": "^0.7.1",
    "jquery": "^2.1.4",
    "lodash": "^3.10.1",
    "react": "^0.14.7",
    "react-dnd": "^2.1.3",
    "react-dnd-html5-backend": "^2.1.2",
    "react-dom": "^0.14.7",
    "tracking": "^1.1.2"
  }
}

.babelrc

{
  "presets": ["react", "es2015", "stage-0"]
}

webpack

var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel-loader'
      }
    ]
  }
};

anyone can help me out please?

[walter0331]

Ahhh, I fixed it by excludingnode_modulesin webpack.conf 👯

      {
        exclude: /(node_modules|bower_components)/,
        test: /\.js$/,
        loader: 'babe-loader'
      },

[github302]

it solves my problem,thank you very much !

[colllin]

@walter0331

loader: 'babe-loader'

This should be a thing.

[jakubzitny]

@billyjanitsch have you considered updating babel? Would you be open for PR with it?

I am running into this problem with Webpack and Babel 6. Similarly as @walter0331. I need to keep this running through my Babel as we're doing custom minification of node_modules so excluding node_modules won't help me.

[jgentes]

Just to clarify, I think everyone means "babel-loader" rather than "babe-loader".

loader: 'babel-loader'

[svidhani]

I am trying to upgrade from babel5.x to 6.x and getting this same error. I am using react, redux with babel 6 and webpack.

Below is my webpack config(partial)
module: {
loaders: [
{ test: /.svg$/, exclude: /.less$/, loader: 'svg-inline'},
{ test: /.coffee$/, loader: 'coffee-loader' },
{ test: /.jsx?$/, exclude: /node_modules/,
loaders:
['react-hot-loader/webpack', 'babel-loader?' + JSON.stringify({
presets: ['es2015','stage-0','react'],
plugins: ['transform-decorators-legacy',
['transform-async-to-module-method',
{'module': 'bluebird', 'method': 'coroutine'}
]]
})
]
},
{ test: /.less/, loader: 'style-loader!css-loader!less-loader' },
{ test: /.css/, loader: 'style-loader!css-loader' },
{ test: /.json$/, loader: 'json-loader' },
{ test: /.gif$/, loader: "url-loader?mimetype=image/png" },
{ test: /.woff(2)?(?v=[0-9].[0-9].[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" },
{ test: /.(ttf|eot|svg)(?v=[0-9].[0-9].[0-9])?$/, loader: "file-loader" },
{ test: /jquery.js$/, loader: 'expose?jQuery' },
]
},

.babelrc

{
"presets": ["es2015", "react", "stage-0"],
"plugins": ["transform-decorators-legacy", ["transform-async-to-module-method", {
"module": "bluebird",
"method": "coroutine"
}]]
}

I noticed one thing that this error message appears mostly for the files where i am importing Promise from 'bluebird'.

Can anyone help?

[mmmeff]

bump. Is there any way to ignore the babel configs of dependencies at build time...?

[ry928330]

@walter0331 thank you very much, this problem doesn't make me so confused until I read your solution. But I don't understand the principle why it can work out by setting like this ： exclude: /(node_modules|bower_components).

[PDS42]

@ry928330 basically, the disposables lib is used in react-dnd, and disposables uses an outdated babel version, Babel 5 (this library isn't maintained). If included in the webpack configuration, it creates a conflict because we are now on the version 6 of Babel. So the better solution here ( at least what worked for me), is not necessarily to exclude all node_modules, but only the conflicting one.

add exclude: /(disposables)/ in your babel-loader webpack config, for instance:

{
     test: /\.js$/,
     exclude: /(disposables)/,
     loader: 'babel-loader',
}

[gaearon]

That’s the right solution. It’s irrelevant what version of Babel disposables uses under the hood. The real problem is you’re trying to compile node_modules with Babel. This is not always safe and you shouldn’t do this unless you know what you’re doing and only opt in specific packages (or use another signal such as engines field and disregard the config).

[gaearon]

That said I published a "fix" in disposables@1.0.2. Still, if you compile everything in node_modules you're asking for problems.

[WaterHong]

mix.webpackConfig({ module: { rules: [{ test: /\.jsx?$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: Config.babel() } }] } })

it's works ,thanks!

[GitKou]

I fixed by add []
presets: [ ["es2015", { loose: false }] ]

[jasonfb]

this happened to me after I inadvertently added stage: 1 to my server/.babelrc file.

{
  "presets": ["es2015", "stage-0"],
  "plugins": ["transform-runtime"],
   stage: 1
}

fixed by removing this

{
  "presets": ["es2015", "stage-0"],
  "plugins": ["transform-runtime"],
}