Question 179093 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to fix 'require() of ES Module not supported' error while updating from Angular 12 to 13?

Require() of ES Module not supported while updating from Angular 12 to 13

I have updated all my packages to support Angular 13, I tried deleting node_modules, package-lock.json, dist and run npm install
but still after complilation in the main.js
platform-browser gets imported by require which could possibly cause this issue

Version tried

Node version – 16.20.0

TypeScript – 4.4.3, 4.6.0

The error is seen in the console when the app opens after ng serve compiles successfully

Error: require() of ES Module
/node_modules/@angular/platform-browser/fesm2015/platform-browser.mjs
not supported. Instead change the require of
/node_modules/@angular/platform-browser/fesm2015/platform-browser.mjs
to a dynamic import() which is available in all CommonJS modules.
at __node_internal_captureLargerStackTrace (node:internal/errors:477:5)
at new NodeError (node:internal/errors:387:5)
at Module.load (node:internal/modules/cjs/loader:1009:11)
at Module._load (node:internal/modules/cjs/loader:846:12)
at f._load (node:electron/js2c/asar_bundle:2:13330)
at o._load (node:electron/js2c/renderer_init:2:3109)
at Module.require (node:internal/modules/cjs/loader:1035:19)
at require (node:internal/modules/cjs/helpers:102:18)
at 7258 (main.js:1:1070126)
at r (runtime.js:1:127)
at R (main.js:1:2708253)
at main.js:1:2708270
at n (runtime.js:1:3008)
at main.js:1:57

Package.json:

  "dependencies": {
    "@angular/animations": "~13.4.0",
    "@angular/cdk": "^13.3.9",
    "@angular/common": "13.4.0",
    "@angular/core": "13.4.0",
    "@angular/forms": "~13.4.0",
    "@angular/material": "^13.3.9",
    "@angular/platform-browser": "~13.4.0",
    "@angular/platform-browser-dynamic": "~13.4.0",
    "@angular/router": "~13.4.0",
    "@grpc/grpc-js": "^1.2.12",
    "angular-plotly.js": "^1.8.0",
    "archiver": "^4.0.2",
    "async-waterfall": "^0.1.5",
    "blockly": "^5.20210325.0",
    "bootstrap": "^4.5.2",
    "chokidar": "^3.5.2",
    "crypto-js": "^4.0.0",
    "dom-to-image": "^2.6.0",
    "downloads-folder": "^3.0.1",
    "electron-json-storage": "^4.5.0",
    "electron-log": "^4.4.1",
    "exceljs": "^4.3.0",
    "file-saver": "^2.0.2",
    "form-data": "^4.0.0",
    "google-protobuf": "^3.13.0",
    "http-server": "^0.12.3",
    "jquery": "^3.5.1",
    "lodash": "^4.17.21",
    "masonry-layout": "^4.2.2",
    "moment": "^2.29.1",
    "moment-timezone": "^0.5.32",
    "ng-circle-progress": "^1.5.1",
    "ng-click-outside": "^6.0.0",
    "ngx-filter-pipe": "^2.1.2",
    "plotly.js": "^2.9.0",
    "resize-observer-polyfill": "^1.5.1",
    "rxjs": "^6.5.3",
    "rxjs-compat": "^6.6.3",
    "split2": "^3.2.2",
    "systeminformation": "^5.11.9",
    "tslib": "^2.0.0",
    "yargs": "^17.0.1",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "^13.1.0",
    "@angular-devkit/build-angular": "~13.0.2",
    "@angular/cli": "~13.0.2",
    "@angular/compiler": "~13.4.0",
    "@angular/compiler-cli": "~13.4.0",
    "@angular/language-service": "~13.4.0",
    "@types/crypto-js": "^4.0.1",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/lodash": "^4.14.168",
    "@types/node": "^14.14.37",
    "codelyzer": "^6.0.0",
    "electron": "^22.2.1",
    "electron-builder": "^23.1.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.6.4",
    "webpack": "^5.84.1",
    "webpack-node-externals": "^2.5.2"
  }
Tags:

2

Answers


  1. 0

    REGARDING THE ACTUAl ISSUE

    Try updating to v13.1.4, I think this will fix it. Had this kind of issue, fixed for me.

    ADDITIONAL INFORMATION

    First of all… DO NOT DELETE package-lock.json this kind of stuff majority of times happens exactly when you continuesly delete it, there is a lock in name for something you know, it holds exact, perfectly working dependency tree, while package.json holds approximate. This is why you generate node_modules with npm ci not with npm i, because it will generate/regenerate node_modules based on package-lock thus firing error if it is not present.

    You never ever delete lock.json in a project where you have so many 3rd party dependencies. Its not about capability of its regeneration, of course you can regenerate it with npm i, the thing is that it will no longer hold the same exact dependency tree, because npm i installs packages based on criterion of ^ and ~. These criterias allow npm to install package update release even if the parent package has not been adapted to use the update.

    To give you an idea, its something like this:
    Imagine you install a package X v.1 which uses dependency package Y v.1.

    Here we go and delete package-lock and use npm i to regenerate it.

    Now it turns out package X released an update so now its v.2 and needs package Y v.2, so npm i installs these because of the prefix it has in package.json.

    And here comes bomb >>> we also have package C v.1 that previously also used package Y v.1 as dependency, but now it has a incomplatibility because package C continues to be v.1 but package Y is now v.2,

    This means that in a big project there is very low chance that regenerated package-lock will hold the same dependency tree that the previous one. You may fix one conflict by deleting it but you will probably mess up whole depenency tree and you will not be able to run project because you will have a lot of package mismatches and incompatibilities.

    You must always fix package issues without deleting package-lock, it is the last option if you can even call it an option. Because you can not delete exact versioning of dependency tree where the majority of stuff is OK.

    Login or Signup to reply.
  2. 0

    Make sure you have Node.js version 16 or later installed.
    Update the TypeScript version in your project’s package.json file to "typescript": "^4.4.4" or the latest version compatible with Angular 13.

    Update all Angular-related packages in your package.json file to their respective Angular 13 versions.

    Ensure that your project uses the ECMAScript modules (ESM) format by adding "type": "module" to your tsconfig.json file.

    Replace any instances of require() with the import statement throughout your codebase, as Angular 13 uses ESM.

    Run npm install to install the updated packages.
    Fix any other compatibility issues or deprecations mentioned in the Angular Update Guide for migrating from 12 to 13.

    Build and run your application to verify that the issue is resolved.
    Remember to always refer to the official Angular documentation and update guides for detailed instructions on how to update your specific project.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search