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

Hi here is what I am doing, I have upgraded the core-js to 3.1.3. Here is my package.json file

{
  "name": "apex",
  "version": "4.1.0",
  "license": "",
  "scripts": {
    "start-server": "node server.js",
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "master-build": "ng build --prod --named-chunks",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "^1.0.0-beta.5",
    "@agm/js-marker-clusterer": "^1.0.0-beta.5",
    "@angular/animations": "^6.1.10",
    "@angular/common": "^6.1.10",
    "@angular/compiler": "^6.1.10",
    "@angular/core": "^6.1.10",
    "@angular/forms": "^6.1.10",
    "@angular/http": "^6.1.10",
    "@angular/platform-browser": "^6.1.10",
    "@angular/platform-browser-dynamic": "^6.1.10",
    "@angular/platform-server": "^6.1.10",
    "@angular/router": "^6.1.10",
    "@ng-bootstrap/ng-bootstrap": "^1.0.4",
    "@ngrx/store": "^5.2.0",
    "@ngx-share/core": "^6.0.1",
    "@ngx-translate/core": "^9.0.2",
    "@ngx-translate/http-loader": "^2.0.1",
    "@qontu/ngx-inline-editor": "^0.2.0-alpha.12",
    "@swimlane/ngx-charts": "^7.1.0",
    "@types/chartist": "^0.9.44",
    "@types/d3-shape": "^1.3.1",
    "agm-direction": "^0.5.9",
    "angular-calendar": "^0.23.7",
    "angular-formio": "^3.16.2",
    "angular-wizard-form": "^0.4.1",
    "angular2-signaturepad": "^2.8.0",
    "angular2-wizard": "^0.4.0",
    "angularfire2": "^5.1.3",
    "bootstrap": "^4.3.1",
    "bootstrap-material-design": "^4.1.1",
    "bourbon": "^4.3.4",
    "chartist": "^0.11.0",
    "classlist.js": "^1.1.20150312",
    "core-js": "3.1.3",
    "d3": "^4.13.0",
    "firebase": "^5.11.1",
    "intl": "^1.2.5",
    "jquery": "^3.4.1",
    "js-marker-clusterer": "^1.0.0",
    "jspdf": "^1.5.3",
    "moment": "^2.24.0",
    "ng-chartist": "^1.1.1",
    "ng-lazyload-image": "^5.1.2",
    "ng-socket-io": "^0.2.4",
    "ng2-charts": "^1.6.0",
    "ng2-ckeditor": "1.2.2",
    "ng2-file-upload": "^1.3.0",
    "ng2-nouislider": "^1.8.2",
    "ng2-select2": "^1.0.0-beta.16",
    "ng2-validation": "^4.2.0",
    "ngx-chips": "^1.9.8",
    "ngx-color-picker": "^5.3.8",
    "ngx-text-overflow-clamp": "0.0.1",
    "ngx-toastr": "^9.2.0",
    "ngx-ui-switch": "^1.6.0",
    "node-sass": "^4.10.0",
    "nouislider": "^11.0.3",
    "ramda": "0.25.0",
    "resize-observer-polyfill": "^1.5.1",
    "rxjs": "6.0.0",
    "rxjs-compat": "6.2.2",
    "screenfull": "^3.3.3",
    "select2": "4.0.6-rc.1",
    "slick-carousel": "^1.8.1",
    "sweetalert2": "^7.33.1",
    "web-animations-js": "^2.2.5",
    "zone.js": "^0.8.29"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.11.4",
    "@angular/cli": "^6.2.9",
    "@angular/compiler-cli": "^6.1.10",
    "@angular/language-service": "^6.1.10",
    "@types/core-js": "^0.9.43",
    "@types/jasmine": "^2.8.16",
    "@types/jquery": "^3.3.29",
    "@types/jspdf": "^1.3.0",
    "@types/node": "^9.6.48",
    "@types/slick-carousel": "^1.6.33",
    "agm-overlays": "^1.3.3",
    "codelyzer": "^4.5.0",
    "jasmine-core": "^2.99.1",
    "jasmine-spec-reporter": "^4.2.1",
    "karma": "^3.1.4",
    "karma-chrome-launcher": "^2.2.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.4.3",
    "karma-jasmine": "^1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "^5.4.2",
    "ts-node": "^4.1.0",
    "tslint": "^5.16.0",
    "typescript": "2.7.2"
  }
}

and here is my polyyfills file

/**
 * This file includes polyfills needed by Angular and is loaded before the app.
 * You can add your own extra polyfills to this file.
 *
 * This file is divided into 2 sections:
 *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 *      file.
 *
 * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
 * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
 * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
 *
 * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
 */

/***************************************************************************************************
 * BROWSER POLYFILLS
 */

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es/symbol';
import 'core-js/es/object';
import 'core-js/es/function';
import 'core-js/es/parse-int';
import 'core-js/es/parse-float';
import 'core-js/es/number';
import 'core-js/es/math';
import 'core-js/es/string';
import 'core-js/es/date';
import 'core-js/es/array';
import 'core-js/es/regexp';
import 'core-js/es/map';
import 'core-js/es/weak-map';
import 'core-js/es/set';

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
import 'classlist.js';  // Run `npm install --save classlist.js`.

/** IE10 and IE11 requires the following to support `@angular/animation`. */
import 'web-animations-js';  // Run `npm install --save web-animations-js`.


/** Evergreen browsers require these. **/
import 'core-js/es/reflect';
(window as any).global = window;

/** ALL Firefox browsers require the following to support `@angular/animation`. **/
import 'web-animations-js';  // Run `npm install --save web-animations-js`.



/***************************************************************************************************
 * Zone JS is required by Angular itself.
 */
import 'zone.js/dist/zone';  // Included with Angular CLI.



/***************************************************************************************************
 * APPLICATION IMPORTS
 */

/* ngx-charts required polyfill ie11 */
import 'core-js/es/array';

/**
 * Date, currency, decimal and percent pipes.
 * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
 */
// import 'intl';  // Run `npm install --save intl`.
/**
 * Need to import at least one locale-data with intl.
 */
// import 'intl/locale-data/jsonp/en';

// Add global to window, assigning the value of window itself.
(window as any).global = window;

but ng is unable to build the source code it is throwing the error, that is confusing

Failed to compile.

./node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/jit-polyfills.js
Module not found: Error: Can't resolve 'core-js/es7/reflect' in 'E:\xampp\htdocs\vpanel\node_modules\@angular-devkit\build-angular\src\angular-cli-files\models'

Can someone help me in?

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Comments: 19 (7 by maintainers)

Most upvoted comments

Hi,

If it is not too late, just remove the number at the end of ‘es’ in the path, like ‘core-js/es/reflect’. It worked for me.

For some reason importing core-js/es/reflect did not work in our case, it resulted in this error:

Unhandled Promise rejection: Can't resolve all parameters for ApplicationModule: (?). ; Zone: <root> ; Task: HTMLDocument.addEventListener:DOMContentLoaded ; Value: Error: Can't resolve all parameters for ApplicationModule: (?).

Only import 'core-js/features/reflect'; worked. Not sure why, but it may help someone.

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.

ERROR in ./src/polyfills.ts Module not found: Error: Can’t resolve ‘core-js/es7/reflect’ in ‘F:\JSON\angular-json-crud\src’

@nicolo-ribaudo thanks for giving me a guide, I just changed the paths in tcconfig.json like this

"paths": {
      "core-js/es7/reflect": [
        "../node_modules/core-js/proposals/reflect-metadata"
      ],
      "core-js/es6/": [
        "./node_modules/core-js/es/"
      ]
    },

but now I am facing this, Look like there are more errors in new core-js build. It’s so annoying

Unhandled promise rejection Error: Zone.js has detected that ZoneAwarePromise `(window|global).Promise` has been overwritten.
Most likely cause is that a Promise polyfill has been loaded after Zone.js (Polyfilling Promise api is not necessary when zone.js is loaded. If you must load one, do so before loading zone.js.)

How to correctly usage this with latest version of core-js without downgrade, is the comment of @andreialecu correct? thanks!

In my case, with Angular 7 and core-js 3.6.4, adding to tsconfig.json

"paths": {
      "core-js/es7/reflect": [
          "../node_modules/core-js/proposals/reflect-metadata"
      ]
}

works

Everything was working fine, as soon as I updated core-js from “2.4.1” to “^3.2.1” I started to see this error. Update the version was the unique change I did, so this is definitely a core-js bug.

When the package is installed it creates neither node_modules/core-js/es6/ nor node_modules/core-js/es7/ folders, only core-js/es/ is found there.

So when I used import ‘core-js/es/reflect’; instead, error message disappeared.

I have tried also changing the order of core-js and zone.js in pollyfils.ts like this

/**
 * This file includes polyfills needed by Angular and is loaded before the app.
 * You can add your own extra polyfills to this file.
 *
 * This file is divided into 2 sections:
 *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 *      file.
 *
 * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
 * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
 * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
 *
 * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
 */

/***************************************************************************************************
 * BROWSER POLYFILLS
 */

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
import 'classlist.js';  // Run `npm install --save classlist.js`.

/** IE10 and IE11 requires the following to support `@angular/animation`. */
import 'web-animations-js';  // Run `npm install --save web-animations-js`.


/** Evergreen browsers require these. **/
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';
(window as any).global = window;

/** ALL Firefox browsers require the following to support `@angular/animation`. **/
import 'web-animations-js';  // Run `npm install --save web-animations-js`.

/***************************************************************************************************
 * APPLICATION IMPORTS
 */

/* ngx-charts required polyfill ie11 */
import 'core-js/es7/array';

/***************************************************************************************************
 * Zone JS is required by Angular itself.
 */
import 'zone.js/dist/zone';  // Included with Angular CLI.





/**
 * Date, currency, decimal and percent pipes.
 * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
 */
// import 'intl';  // Run `npm install --save intl`.
/**
 * Need to import at least one locale-data with intl.
 */
// import 'intl/locale-data/jsonp/en';

// Add global to window, assigning the value of window itself.
(window as any).global = window;

Which version of @angular-devkit/build-angular? It uses core-js 3 (https://unpkg.com/@angular-devkit/build-angular@0.800.2/package.json), but the error you reported is about it trying to require a core-js 2 file.

That file now correctly imports core-js 3: https://unpkg.com/@angular-devkit/build-angular@0.800.2/src/angular-cli-files/models/jit-polyfills.js