Module not found: Error: Can't resolve 'core-js/es6'

Question

I've got a problem with my build process in relation to my React app.

I always get the following error:

Module not found: Error: Can't resolve 'core-js/es6'

if I use this in a polyfill.js:

import 'core-js/es6';

That is my package.json:

{
  "name": "test",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "private": true,
  "devDependencies": {
    "@babel/core": "^7.4.0",
    "@babel/preset-env": "^7.4.2",
    "@babel/preset-react": "^7.0.0",
    "@babel/runtime": "^7.4.2",
    "babel-loader": "^8.0.5",
    "babel-preset-es2015": "^6.24.1",
    "copy-webpack-plugin": "^5.0.2",
    "css-hot-loader": "^1.4.4",
    "eslint": "5.15.3",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-loader": "^2.1.2",
    "eslint-plugin-import": "2.16.0",
    "eslint-plugin-jsx-a11y": "6.2.1",
    "eslint-plugin-react": "7.12.4",
    "file-loader": "^3.0.1",
    "node-sass": "^4.11.0",
    "prettier": "^1.16.4",
    "react-hot-loader": "4.8.0",
    "sass-loader": "^7.1.0",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.2.1"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "core-js": "^3.0.0",
    "prop-types": "^15.7.2",
    "react": "^16.8.5",
    "react-dom": "^16.8.5",
    "react-redux": "^6.0.1",
    "react-string-replace": "^0.4.1",
    "redux": "^4.0.1",
    "slick-carousel": "^1.8.1"
  },
  "scripts": {
    "dev": "webpack-dev-server --hot",
    "build": "webpack --colors --profile --progress --env.mode production",
    "lint": "eslint ./src/ --ext .js,.jsx"
  }
}

Can someone help here?

The same error in angular app after upgrade version. Check, if this folder (core-js/es6) exists in your node-modules. — Kamil Naja, Mar 23 '19 at 11:43
@KamilNaja I am facing the same problem and the folder (core-js/es6) does not exist in my node_modules, I have (core-js/es) in my node_modules. What to do? — Kunal Tyagi, Jan 29 '20 at 08:57

score 225 · Answer 1 · answered May 17 '19 at 12:36

225

The imports have changed for core-js version 3.0.1 - for example

import 'core-js/es6/array'; and import 'core-js/es7/array';

can now be provided simply by the following

import 'core-js/es/array';

if you would prefer not to bring in the whole of core-js

answered May 17 '19 at 12:36

LeaveTheCapital

2,530
1
7
11

23

after migrated angular to 8 I was getting the error but your solution fixed it. – Nakres Jun 18 '19 at 16:19
9

This is the solution for migration to angular 8 :) thank you – Kris Boyd Aug 07 '19 at 16:08
I have nothing in my code that starts with `import 'core-js/...` so what should I change and where? Using VueJS 2 – volume one May 04 '20 at 11:55
@volumeone run 'npm i core-js' in your terminal. – Shivam Shukla May 21 '20 at 10:46
2

@ShivamShukla thanks but I had to downgrade to 2.6.11 for it to work. There is a bug between mini-css-extract-plugin and core-js 3 – volume one May 21 '20 at 12:24

score 127 · Answer 2 · edited May 02 '19 at 11:41

127

I found possible answer. You have core-js version 3.0, and this version doesn't have separate folders for ES6 and ES7; that's why the application cannot find correct paths.

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

In my case, with Angular, this works ok.

edited May 02 '19 at 11:41

Kamafeather

8,663
14
69
99

answered Mar 23 '19 at 11:54

Kamil Naja

6,267
6
33
47

1

Thanks, that's a solution at least. I also found the solution to use version 3.0 without downgrading. Will post – Gutelaunetyp Mar 24 '19 at 14:58
3

Can you explain how downgrading doesn't break everything else and why you wouldn't just update to a new format? You've got a tonne of upvotes which suggests this is working well for people but surely this isn't a good long term solution. – Simon_Weaver Sep 18 '19 at 17:51
So, perfect solutions is upgrade your imports whenever you use core-js to use newest version. Unfortunately, when this dependency is used in other library, this solution can be impossible and you need use workaround. – Kamil Naja Sep 18 '19 at 19:05
5

-1 This is a band-aid to get rid of the message, downgrading your packages is not a good practice to get in to. Readers are much better off with correcting their imports. Not only is it *just as simple* if not more simple, it is far better practice: https://stackoverflow.com/a/56186570/610573 – Chris Baker Oct 31 '19 at 15:21
1

This works but does it mean I cannot use core-js 3? People say "upgrade your imports" to what exactly? I don't have any code that says `import 'core-js/es6'` in my own code. Maybe some node_modules do but I don't want to tamper with third-party packages surely... – volume one May 04 '20 at 11:51
npm install --save core-js@^2.5.0, worked for me, thanks – sb32134 May 31 '20 at 06:22
Upgrading your packages isn't always the solution. Just because it's the latest doesn't mean that other packages you use also support it. The gordion knot is ridiculous to always keep up to date. – CodeSammich Nov 25 '21 at 02:07
This is probably a framework hell :D LOL. Downgrade `core-js` and all errors are gone like a magic. – Jamille May 29 '22 at 02:12

score 53 · Answer 3 · edited Aug 04 '19 at 10:01

53

Change all "es6" and "es7" to "es" in your polyfills.ts and polyfills.ts (Optional).

From: import 'core-js/es6/symbol';
To: import 'core-js/es/symbol';

edited Aug 04 '19 at 10:01

Evgeny Minkevich

2,319
3
28
42

answered Aug 04 '19 at 08:06

Yawahang Rai

631
5
5

Bhadresh Patel · Answer 4 · 2022-03-10T07:10:16.037

50

After Migrated to New Angular Version or Version changed for core-js, core-js/es6 or core-js/es7 Will not work.

You have to simply replace import core-js/es/ in your polyfills.ts file.

For ex.

import 'core-js/es6/symbol'

to

import 'core-js/es/symbol'

This will work properly.

edited Mar 10 '22 at 07:10

answered Jul 18 '19 at 12:32

Bhadresh Patel

1,671
17
18

Works for me in Angular 8! – ihimv Aug 12 '19 at 11:10
This works for me but I'm still super confused. I cross referenced with Angular source expecting to see this newer single import - and even the 'hello world Ivy' example still shows `/es6` paths https://github.com/angular/angular/blob/master/integration/cli-hello-world-ivy-minimal/src/polyfills.ts Any idea why they're doing that? – Simon_Weaver Sep 18 '19 at 17:52
More details in issue: https://github.com/angular/angular/issues/32228 – Constantin Konstantinidis Apr 16 '20 at 13:32
you are a life saver! – UI_Dev Sep 10 '20 at 05:03
This works exactly as advertised. Thank you so much! – Arthur Nov 13 '21 at 20:13

score 15 · Answer 5 · edited Mar 12 '21 at 11:18

15

Change all es6 and es7 to es in your polyfills.ts

example:

import 'core-js/es6/reflect';

becomes

import 'core-js/es/reflect';

edited Mar 12 '21 at 11:18

JoSSte

2,953
6
34
54

answered Aug 06 '20 at 08:13

Father-Empire

539
4
9

Thanks, after adding all mentioned imports my app is now working on IE11. – Pinaki Feb 11 '21 at 07:52
This works exactly as advertised. Kudos! – Arthur Nov 13 '21 at 20:13

RiZKiT · Answer 6 · 2020-05-04T12:10:51.333

13

If you use @babel/preset-env and useBuiltIns, then you just have to add corejs: 3 beside the useBuiltIns option, to specify which version to use, default is corejs: 2.

presets: [
  [
    "@babel/preset-env", {
      "useBuiltIns": "usage",
      "corejs": 3
    }
  ]
],

For further details see: https://github.com/zloirock/core-js/blob/master/docs/2019-03-19-core-js-3-babel-and-a-look-into-the-future.md#babelpreset-env

edited May 04 '20 at 12:10

answered May 04 '20 at 12:05

RiZKiT

2,107
28
23

Worked just fine. Thanks – Ranjan Kumar Jan 05 '21 at 07:34

oz21m · Answer 7 · 2020-01-22T20:51:36.923

6

Sure, I had a similar issue and a simple

npm uninstall @babel/polyfill --save &&
npm install @babel/polyfill --save

did the trick for me.

However, usage of @babel/polyfill is deprecated (according to this comment) so only try this if you think you have older packages installed or if all else fails.

edited Jan 22 '20 at 20:51

answered Jun 03 '19 at 19:11

oz21m

99
1
5

1

Dude you're a life saver. It drove me freaking nuts. – DiederikEEn Jul 02 '19 at 21:28
4

Usage of `@babel/polyfill` is deprecated. – Neurotransmitter Jul 18 '19 at 13:13
I am upgrading from Angular 13 to 14 and this worked for me. – Phil Huhn Jun 27 '22 at 23:58

score 5 · Accepted Answer · edited May 02 '19 at 11:47

5

Ended up to have a file named polyfill.js in projectpath\src\polyfill.js That file only contains this line: import 'core-js'; this polyfills not only es-6, but is the correct way to use core-js since version 3.0.0.

I added the polyfill.js to my webpack-file entry attribute like this:

entry: ['./src/main.scss', './src/polyfill.js', './src/main.jsx']

Works perfectly.

I also found some more information here : https://github.com/zloirock/core-js/issues/184

The library author (zloirock) claims:

ES6 changes behaviour almost all features added in ES5, so core-js/es6 entry point includes almost all of them. Also, as you wrote, it's required for fixing broken browser implementations.

(Quotation https://github.com/zloirock/core-js/issues/184 from zloirock)

So I think import 'core-js'; is just fine.

edited May 02 '19 at 11:47

Kamafeather

8,663
14
69
99

answered Mar 24 '19 at 15:05

Gutelaunetyp

2,144
4
15
40

For additional info on modules & namespaces to import, check the [*core-js* current documentation](https://github.com/zloirock/core-js/blob/e88cee56940308d3b4f99251e8f6d96e1ab69401/docs/2019-03-19-core-js-3-babel-and-a-look-into-the-future.md#packages-entry-points-and-modules-names). – Kamafeather May 02 '19 at 12:14
Is it possible to mark this as the correct answer, I think this is more accurate especially almost a year later. – doz87 Mar 08 '20 at 09:00

score 5 · Answer 9 · answered Oct 29 '19 at 15:11

5

Just change "target": "es2015" to "target": "es5" in your tsconfig.json.

Work for me with Angular 8.2.XX

Tested on IE11 and Edge

answered Oct 29 '19 at 15:11

jspassov

791
7
11

score 5 · Answer 10 · answered Apr 13 '22 at 12:39

I got this error today (13 April 2022) after upgrade core-js version from 2 to 3 and after I tried to find the answer for several Hour, finally I can solved it after update my babel.config.js and make it like this:

Before:

presets: [ "@vue/app" ]

After:

presets: [ [ "@vue/app", { useBuiltIns: "entry" } ] ]

Notes

I'm using Vue in my project
I already try almost all question regarding npm uninstall core-js and tried to re-install it again npm install core-js --save or delete node_modules, package-lock.json, and yarn-lock.json but still failed to solved it
I can solved it if I downgrade core-js version using this line : npm install core-js@2.6.5, but it is not a good solution for long term condition
Explanation for this problem: this problem happens because the path for core-js/es6 in version 3 is already changed to core-js/es that's why your project can't find it the right path for the directory where it pointed to core-js/es6

Cheers buddy. You definitely saved me a day or two of debugging this crap. — Carson McManus, Nov 02 '22 at 18:08

score 1 · Answer 11 · answered May 13 '22 at 07:44

It is vital that Webpack is able to resolve the import statements prepended to source files by Babel, for example

import "core-js/modules/es.object.freeze.js";

If such an import statement is inserted into a file which does not reside in a package which has core-js as a dependency, then Webpack may not be able to resolve its location on disk, resulting in a ModuleNotFoundError.

The solution for me was to specify the application's node_modules directory in the resolve section of my webpack.config.cjs:

module.exports = {
    resolve: {
        modules: [
            path.join(__dirname, "node_modules"), // Contains core-js.
            "node_modules"                        // Webpack's default.
        ]
    }
}

And of course core-js is listed as a dependency in my application's package.json:

{
    "dependencies": {
        "core-js": "^3.19.3"
    }
}

score 1 · Answer 12 · answered Jun 09 '22 at 15:41

1

For Angular 14 I had to run npm i --save core-js

I kept the polyfills the same as in the Amplify docs:

import 'core-js/es/typed-array';
import 'core-js/es/object';

answered Jun 09 '22 at 15:41

BatteryAcid

8,381
5
28
40

score 0 · Answer 13 · answered Aug 21 '23 at 08:25

0

npx yarn add @babel/runtime@>=7 core-js-pure@>=3 by installing this, resolved my issue

answered Aug 21 '23 at 08:25

Awais Rasheed

1

Thank you for your interest in contributing to the Stack Overflow community. This question already has quite a few answers—including one that has been extensively validated by the community. Are you certain your approach hasn’t been given previously? **If so, it would be useful to explain how your approach is different, under what circumstances your approach might be preferred, and/or why you think the previous answers aren’t sufficient.** Can you kindly [edit] your answer to offer an explanation? – Jeremy Caney Aug 26 '23 at 23:20

Module not found: Error: Can't resolve 'core-js/es6'

13 Answers13

Linked