"Cannot remove 'babel-plugin-transform-es2015-modules-commonjs' from the plugin list."

[matt-mcdaniel]

Webpack is throwing this error when using this preset:

Module build failed: Error: Cannot remove "babel-plugin-transform-es2015-modules-commonjs" from the plugin list.

Package.json

"devDependencies": {
    ...
    "babel-core": "^6.9.1",
    "babel-eslint": "^6.0.4",
    "babel-loader": "^6.2.4",
    "babel-plugin-ramda": "^1.1.5",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.10.3",
    "babel-plugin-transform-object-rest-spread": "^6.8.0",
    "babel-preset-es2015": "6.6.0",
    "babel-preset-es2015-webpack": "^6.4.1",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-0": "^6.5.0",
   ...

.babelrc

{
  "presets": ["es2015-webpack", "react", "stage-0"],
  "plugins": ["transform-object-rest-spread", "ramda"]
}

Here is the bit of code from index.js that is tripping webpack up:

es2015PluginList = babelPresetEs2015.plugins;

es2015WebpackPluginList = es2015PluginList.filter(function (es2015Plugin) {
    return es2015Plugin !== commonJsPlugin;
});

if (es2015PluginList.length !== es2015WebpackPluginList.length + 1) {
    throw new Error('Cannot remove "babel-plugin-transform-es2015-modules-commonjs" from the plugin list.');
}

I'm running npm v3.9.6 and Node v4.4.0.

[gajus]

@matt-mcdaniel Can you attempt to fix this and raise a PR? It should be pretty straightforward.

[matt-mcdaniel]

Submitted a pull request fixing this issue. #11

The issue is that, for projects that have babel-preset-es2015 installed on npm 3+, the commonJsPlugin variable is resolving to the path set for the try/catch block meant for npm 2+. This version of the module is not equal to the module being checked against. Because of this, filtering out babel-plugin-transform-es2015-modules-commonjs by checking equality is ineffective and throws an error thusly.

A temporary fix for this is to run npm uninstall --save-dev babel-preset-es2015.

[gajus]

Thank you for investigating. Wouldn't a simple solution would to simply add a warning to the documentation? (e.g. simply telling people to ensure that they have a clean install without babel-preset-es2015 dependency)

[matt-mcdaniel]

That would definitely be an option, but it seems like you wouldn't want the two projects be mutually exclusive. For example, you might want to support projects where people use babel-preset-es2015 for development and babel-preset-es2015-webpack for production.

There are also other packages that require babel-preset-es2015, for example babel-plugin-add-module-exports. Having the two be mutually exclusives prevents people from using these packages.

It's also unexpectedly breaking a lot of build processes for users who upgrade from npm 2x to npm 3x. The error provided doesn't make it immediately clear what the problem is. See issue #658 of react-boilerplate.

It also might be a barrier to entry for people trying to switch over to babel-preset-es2015-webpack that have not properly uninstalled babel-preset-es2015. I would guess that this Webpack course drives a lot of downloads of the npm package. The video doesn't explicitly state that you need to remove babel-preset-es2015 for it to work. This might cause some frustration among would-be adopters.

[matt-mcdaniel]

Any update on your intention to accept the pull request/fix this issue?

[gajus]

Version v6.4.2 has been published. Thank you.

[kyma]

What are the steps for resolving this? I've tried various combinations but still getting the same error

[phairoh]

babel-preset-es2015 posted an update to npm a few hours ago and I suspect it somehow broke this once again. I'm looking in to it but no luck so far.

[cklmercer]

Fighting this fight right now. It definitely wasn't an issue yesterday.

[Nyalab]

just use #14

[XiaoyuSun]

I have updated babel-preset-es2015-webpack to the version 6.4.2, but still have this issue.

[andrewmclagan]

bump also having this on:

6.4.2

with

node v5.11.1
npm 3.8.6

[cklmercer]

Drop babel-preset-es2015-webpack and just use babel-preset-es2015

[hipertracker]

Is 'babel-preset-es2015-webpack' dead? What is exactly the difference between babel-preset-es2015-webpack and babel-preset-es2015? Both are supporting three-shaking in Webpack2? I can't see any difference in generated builds...

(BTW, to disable that nasty error in babel-preset-es2015-webpack I commented out one line: node_modules/babel-preset-es2015-webpack/index.js:35)

[preco21]

@hipertracker It seems to be no difference between the both. But now the babel-preset-2015 supports module option, I think there is no reason to use babel-preset-es2015-webpack instead .

[brettvitaz]

@hipertracker PR #13 has a fix for this issue. Your fix could be causing you other unexpected problems by ignoring the warning.

[Flavien-Pensato]

@hipertracker, @preco21, Hey guys, there is a difference between them. Babel-preset-es2015-webpack is smarter then babel-preset-es2015. He can avoid useless function and generate smaller builds because it understands module ;)

[preco21]

@Flavien-Pensato What do you mean? If you are talking babel-preset-es2015-webpack is smarter than babel-preset-es2015 because of it:

He can avoid useless function and generate smaller builds because it understands module

Then I guess you probably misunderstood how this module works. I remember this module's purpose was let babel-preset-es2015 to exclude babel-plugin-transform-es2015-modules-commonjs to make webpack handle ESM which supported natively since v2.

So there is no difference with it.

[neekey]

still getting this error, and I got to know babel-preset-es2015-webpack from here, and just look at babel-preset-es2015-webpac's readme, I have no idea what's difference neither