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?

Gryphon

The same error in angular app after upgrade version. Check, if this folder (core-js/es6) exists in your node-modules. – Libbey

@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? – Asteriated

Answer 1

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.

Gryphon

For additional info on modules & namespaces to import, check the core-js current documentation. – Themistocles

Is it possible to mark this as the correct answer, I think this is more accurate especially almost a year later. – Bipinnate

Answer 2

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

Horsefly

after migrated angular to 8 I was getting the error but your solution fixed it. – Leix

This is the solution for migration to angular 8 :) thank you – Fortepiano

I have nothing in my code that starts with import 'core-js/... so what should I change and where? Using VueJS 2 – Legerdemain

@volumeone run 'npm i core-js' in your terminal. – Whence

@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 – Legerdemain

Answer 3

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 [email protected]

In my case, with Angular, this works ok.

Libbey

Thanks, that's a solution at least. I also found the solution to use version 3.0 without downgrading. Will post – Gryphon

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. – Apps

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. – Libbey

-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://mcmap.net/q/135024/-module-not-found-error-can-39-t-resolve-39-core-js-es6-39 – Ceja

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... – Legerdemain

npm install --save core-js@^2.5.0, worked for me, thanks – Roundworm

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. – Cookstove

This is probably a framework hell :D LOL. Downgrade core-js and all errors are gone like a magic. – Melendez

Answer 4

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';

Arthritis

Answer 5

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.

Butene

Works for me in Angular 8! – Flexed

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 github.com/angular/angular/blob/master/integration/… Any idea why they're doing that? – Apps

More details in issue: github.com/angular/angular/issues/32228 – Penal

you are a life saver! – Pera

This works exactly as advertised. Thank you so much! – Vallecula

Answer 6

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

example:

import 'core-js/es6/reflect';

becomes

import 'core-js/es/reflect';

Monocycle

Thanks, after adding all mentioned imports my app is now working on IE11. – Incudes

This works exactly as advertised. Kudos! – Vallecula

Answer 7

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

Grizelda

Worked just fine. Thanks – Moderate

Answer 8

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.

Uitlander

Dude you're a life saver. It drove me freaking nuts. – Diazotize

Usage of @babel/polyfill is deprecated. – Mahau

I am upgrading from Angular 13 to 14 and this worked for me. – Factual

Answer 9

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

1. I'm using Vue in my project

2. 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

3. I can solved it if I downgrade core-js version using this line : npm install [email protected], but it is not a good solution for long term condition

4. 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

Olvera

Cheers buddy. You definitely saved me a day or two of debugging this crap. – Mucosa

Answer 10

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

Work for me with Angular 8.2.XX

Tested on IE11 and Edge

Diaeresis

Answer 11

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"
    }
}

Collusion

Answer 12

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';

Dinar

Answer 13

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

Dissonance

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? – Protoplast

Answer 14

The imports have changed now this resolved my issue :) Change all "es6" and "es7" to "es" in your polyfills.ts From: 

import 'core-js/es6/symbol';

To this:

import 'core-js/es/symbol';

This issue I faced on migration from 7 to 8 transition of angular update

Artemas