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

Question

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

Answer 1

Yes, We faced this issue while upgrading Angular from 12 to 13 and we had "type": "commonjs" present in our package.json.

One major change done by the Angular developers is that they were no longer providing the CommonJS modules, instead only ESM modules (MJS files). So, if we try to load Angular 13 packages like core, platform-browser etc. with commonJS syntax (require ('@angular/core')), it will give require() of ES Module not supported error.

We updated dependencies like typescript, node and all, reinstalled node modules, and cleared the npm and angular cache multiple times but nothing worked for us.

In our project (Angular + Electron), we were using some of the node modules (like 'os', 'fs' etc) that are usually not available in browsers because of obvious security reasons. So we were using a custom webpack to bundle such node modules. In webpack configuration, we can pass the list of externals node modules that need to be exposed in the browser. These externals list was having @angular packages also (Actually, we had put all node modules using webpack-node-externals in the externals dependency list). The generated bundle was then having the commonJS imports i.e., require() for external dependencies. So, giving us require() of ES Module not supported error.

By default, the angular webpack was generating the ESM imports only but because we had specified angular in external dependencies, we were getting that error. So we were left with two options

• Remove angular packages from the externals list. It is recommended to keep this list as small as possible.
• Configure custom builder webpack to generate ESM imports for externals also.

We opted for the first option and it worked like a charm.