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 plilation 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 piles 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/mon": "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-pat": "^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/piler": "~13.4.0",
"@angular/piler-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"
}
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 plilation 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 piles 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/mon": "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-pat": "^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/piler": "~13.4.0",
"@angular/piler-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"
}
- Have you tried to delete node-modules, angular and package-lock.json and run npm i? – kdc Commented May 31, 2023 at 7:03
- @KrystianChodak -Yes, I have tried it – Daneshwaran M Commented May 31, 2023 at 7:57
3 Answers
Reset to default 1Yes, We faced this issue while upgrading Angular from 12 to 13 and we had "type": "monjs" 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 monJS 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 monJS 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 remended 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.
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 es bomb >>> we also have package C v.1 that previously also used package Y v.1 as dependency, but now it has a inplatibility 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 inpatibilities.
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.
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 patible 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 patibility 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.