20

I upgraded babel 6.x → 7.x but having issues running Webpack.

It is complaining about missing core-js/modules/*.

My babel.config.js is in the root directory. I converted the previously existing .babelrc to js (.babelrc also produced the same errors). I am guessing it is some collision with all the core, corejs2, runtime stuff.

There are two apps in my src, mine and Styleguidist (in ./node_modules). My app transpiles and works with these same package.json/babel.config, but Styleguidist does not.

The error when running Styleguidist with webpack:

Module not found: Error: Can't resolve 'core-js/modules/es.array.concat' in '/project/src/node_modules/react-styleguidist/lib/client/rsg-components/Slot'

/node_modules/react-styleguidist/lib/client/rsg-components/Slot.js:

import "core-js/modules/es.array.concat";
import "core-js/modules/es.array.filter";
...

package.json

"dependencies": {
    "@babel/polyfill": "^7.0.0",
    "@babel/runtime-corejs2": "^7.4.3",
}
"devDependencies": {
    "@babel/core": "^7.4.3",
    "@babel/plugin-proposal-class-properties": "^7.0.0",
    "@babel/plugin-proposal-decorators": "^7.0.0",
    "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
    "@babel/plugin-proposal-function-sent": "^7.0.0",
    "@babel/plugin-proposal-json-strings": "^7.0.0",
    "@babel/plugin-proposal-numeric-separator": "^7.0.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.4.3",
    "@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-syntax-jsx": "^7.0.0",
    "@babel/plugin-transform-modules-commonjs": "^7.4.3",
    "@babel/plugin-transform-react-jsx": "^7.3.0",
    "@babel/plugin-transform-runtime": "^7.4.3",
    "@babel/preset-env": "^7.4.3",
    "@babel/register": "^7.0.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^10.0.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-jest": "^24.7.1",
    "babel-loader": "^8.0.0",
    "babel-plugin-dynamic-import-node": "^2.2.0",
    "babel-plugin-transform-vue-jsx": "^4.0.1",
}

babel.config.js

module.exports = {
    presets: ['@babel/preset-env'],
    plugins: [
        '@babel/plugin-transform-runtime',
        '@babel/plugin-transform-react-jsx',
        'transform-vue-jsx',
        "@babel/plugin-proposal-object-rest-spread",
        "@babel/plugin-syntax-dynamic-import",
        "@babel/plugin-syntax-import-meta",
        "@babel/plugin-proposal-class-properties",
        "@babel/plugin-proposal-json-strings",
        [
            "@babel/plugin-proposal-decorators",
            {
                "legacy": true
            }
        ],
        "@babel/plugin-proposal-function-sent",
        "@babel/plugin-proposal-export-namespace-from",
        "@babel/plugin-proposal-numeric-separator",
        "@babel/plugin-proposal-throw-expressions"],
    comments: false
}
Rob
  • 14,746
  • 28
  • 47
  • 65
Elijah
  • 1,252
  • 3
  • 21
  • 32
  • 1
    I looked at Styleguidist' package.json and saw that they have "core-js": "^3.0.0". I added that to my package.json and now it starts up!! Thanks, me. If someone can explain to me the reason for 15 different corejs's and polyfills, I would appreciate that. – Elijah Apr 18 '19 at 15:00
  • 2 apps are working, but Jest does not. – Elijah Apr 18 '19 at 15:08

5 Answers5

22

Quoting from Babel 7.4.0 release :

@babel/polyfill isn't a plugin or preset, but a runtime package: if we added an option to switch between core-js@2 and core-js@3, both the package versions would need to be included in your bundle. For this reason, we decided to deprecate it: you now should load core-js for polyfills, and regenerator-runtime/runtime if you are transforming generators:

As you are using 7.4.3 version of babel, @babel/polyfill might not work as expected. Instead please add core-js and regenerator-runtime manually. Quoting from core-js3 release announcement:

Instead of

import "@babel/polyfill";

you should use those 2 lines:

import "core-js/stable";
import "regenerator-runtime/runtime";

Don't forget install those dependencies directly!

npm i --save core-js regenerator-runtime
Easwar
  • 5,132
  • 1
  • 11
  • 21
5

I had the same issue and as often happens I forgot to have another package installed as:

"@babel/runtime-corejs3": "^7.5.5",

Don't forgot to install it at same level where you have the issue(either dev, local or production) level:

 npm i -D(or --save-dev) @babel/runtime-corejs3

So in general this kind of errors happens when there are dependencies update change significantly in the version and aren't backward compatible with previous versions(API changes). Indeed corejs3 isn't at all compatible with corejs2 or older.

Carmine Tambascia
  • 1,628
  • 2
  • 18
  • 32
  • Thanks. I just forget to install `npm install core-js@3 --save` when I tried to set `"corejs": "3.21.1"` for the `@babel/preset-env` preset inside `babel.config.json` – James Bond Apr 13 '22 at 17:20
1

I found possible answer. To resolve this error, you can downgrade the core-js version to 2.5.7. This version produces correct catalogs structure, with separate ES6 and ES7 folders.

To downgrade the version, simply run:

npm i -S core-js@2.5.7

Sumanth
  • 477
  • 1
  • 6
  • 11
0

First, you need to find out whether the error complained about corejs3 or corejs2 and that is easy, if the error said something like Module not found: Error: Can't resolve 'core-js/modules/es6.array.fill then it is corejs2; if the error said something like Module not found: Error: Can't resolve 'core-js/modules/es.array.concat' then it is corejs3. That is because as the corejs author explained at core-js@3, babel and a look into the future

In previous versions of core-js, modules with polyfills for stable ECMAScript features and ECMAScript proposals were prefixed with es6. and es7.

So you need corejs3 and your @babel/runtime-corejs2": "^7.4.3" was wrong(that was why you get the error). From my experience babel 7 works best with corejs3.

Second, The core-js author said it's 3 different ways of core-js usage. You should use only one of them:

  1. core-js direct import
  2. core-js injecting by usage plugin from @babel/preset-env
  3. core-js injecting without global pollution by @babel/transform-runtime plugin

You don't need to directly import corejs in your codes (as one answer suggetsed). The 2nd/3rd option is easier. I never directly import corejs in my codes. To use 2nd option using useBuiltIns. The babel document explains about the useBuiltIns option in preset-env.

The babel document explains the 3rd option in https://babeljs.io/docs/babel-plugin-transform-runtime#options

The different between 2nd/3rd option lies in the difference between core-js and core-js-pure. As the author said it in the core-js 3 release note,

Extract a version without global namespace pollution to a separate core-js-pure package (replacement for core-js/library).

If you use 3rd option then npm install --save @babel/runtime-corejs3 instead of npm i core-js(which is for the 2nd option)

Qiulang
  • 10,295
  • 11
  • 80
  • 129
0

So if you're using webpack with babelrc then it by default uses corejs v2, but you might have installed the latest version of corejs which is v3. So this error pops up to you.

Solution:

If you want latest corejs support:

  1. Go to webpack.config.js
    under module where you have written presets, update it to:
presets: [[
  "@babel/preset-env",
  {
    corejs: "3",
    useBuiltIns: "usage"
  }
], "...otherPresets, if you have any"]
  1. make the same change in .babelrc
"presets": [
  [
    "@babel/preset-env",
    {
      "corejs": "3",
      "useBuiltIns": "usage",
      "debug": false
    }
  ],
  "...otherPresets, if you have any"
]

If you don't want to make the above changes (which you shouldn't) do:

npm i core-js@2.6.11 # install latest subversion in the corejs2
Abhishek Kumar
  • 820
  • 12
  • 16