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

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

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.

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

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.

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

example:

import 'core-js/es6/reflect';

becomes

import 'core-js/es/reflect';

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

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.

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.

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

Work for me with Angular 8.2.XX

Tested on IE11 and Edge

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

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