search

zloirock / core-js

Standard Library
MIT License
24.54k stars 1.65k forks source link

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

Closed mudasserzahid closed 5 years ago

mudasserzahid commented 5 years ago

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?

nicolo-ribaudo commented 5 years ago

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

mudasserzahid commented 5 years ago

@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.)
zloirock commented 5 years ago

For correct polyfilling, you should load core-js before Zone.js.

zloirock commented 5 years ago

The first issue is the full duplicate of #412.

zloirock commented 5 years ago

Should be resolved. If you will have some more questions - write here.

mudasserzahid commented 5 years ago

Specified commit didn't fixed my issue, you can ask about resources which I am trying . that may be helpful for me to track issue.

zloirock commented 5 years ago

@mudasserzahid one more time - for resolving your issue, you should load core-js before Zone.js, see https://github.com/angular/zone.js/issues/783. What commit are you talking about?

mudasserzahid commented 5 years ago

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;
zloirock commented 5 years ago

If it didn't help - see where you load another polyfill or one more copy of core-js after zone.js - this is what is written in your error message. Anyway, it's not a core-js issue, you could find more info in the zone.js issue mentioned above.

sajantalekar commented 5 years ago

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

David-TAKOUO commented 5 years ago

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.

AnassL commented 4 years ago

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.

zloirock commented 4 years ago

@AnassL please, before adding comments like this read the thread.

andreialecu commented 4 years ago

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.

vivek-singh-748 commented 4 years ago

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.

BruneXX commented 4 years ago

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

elgiano commented 4 years ago

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

ejntaylor commented 3 years ago

This worked for me: just swap out es6 and es7 with features directory

import 'core-js/es6/set => import core-js/features/set

awais144506 commented 1 year ago

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