babel 7.x - Can't resolve 'core-js/modules/es.array.concat'

Question

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
}

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

score 15 · Answer 1 · answered Jun 06 '19 at 09:37

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

This answer has saved my day. – a_here_and_now Jan 10 '20 at 23:35 — a_here_and_now, Jan 10 '20 at 23:35
This was exactly what I needed. – Johnny Oshika Nov 27 '20 at 18:11 — Johnny Oshika, Nov 27 '20 at 18:11

Carmine Tambascia · Answer 2 · 2020-06-25T20:45:05.197

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. Indeed corejs3 isn't at all compatible with corejs2 or older.

score 0 · Answer 3 · answered May 14 '19 at 07:57

0

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

answered May 14 '19 at 07:57

Sumanth

418
5
11

babel 7.x - Can't resolve 'core-js/modules/es.array.concat'

package.json

babel.config.js

3 Answers3