186

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?

2
  • 2
    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, 2019 at 11:43
  • 1
    @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? Jan 29, 2020 at 8:57

13 Answers 13

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

5
  • 23
    after migrated angular to 8 I was getting the error but your solution fixed it.
    – Nakres
    Jun 18, 2019 at 16:19
  • 9
    This is the solution for migration to angular 8 :) thank you
    – Kris Boyd
    Aug 7, 2019 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 4, 2020 at 11:55
  • @volumeone run 'npm i core-js' in your terminal. May 21, 2020 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, 2020 at 12:24
129

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.

8
  • 1
    Thanks, that's a solution at least. I also found the solution to use version 3.0 without downgrading. Will post Mar 24, 2019 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. Sep 18, 2019 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, 2019 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: stackoverflow.com/a/56186570/610573 Oct 31, 2019 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 4, 2020 at 11:51
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';
0
51

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.

5
15

Make changes to your Polyfills.ts file

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

example:

import 'core-js/es6/reflect';

becomes

import 'core-js/es/reflect';
2
  • Thanks, after adding all mentioned imports my app is now working on IE11.
    – Pinaki
    Feb 11, 2021 at 7:52
  • This works exactly as advertised. Kudos!
    – Arthur
    Nov 13, 2021 at 20:13
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

1
  • Worked just fine. Thanks Jan 5, 2021 at 7:34
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.

3
  • 1
    Dude you're a life saver. It drove me freaking nuts. Jul 2, 2019 at 21:28
  • 4
    Usage of @babel/polyfill is deprecated. Jul 18, 2019 at 13:13
  • I am upgrading from Angular 13 to 14 and this worked for me.
    – Phil Huhn
    Jun 27, 2022 at 23:58
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.

2
  • For additional info on modules & namespaces to import, check the core-js current documentation. May 2, 2019 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 8, 2020 at 9:00
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

5

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

1
  • Cheers buddy. You definitely saved me a day or two of debugging this crap. Nov 2, 2022 at 18:08
1

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"
    }
}
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';
0

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

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? Aug 26 at 23:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.