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

The Problem:

Problem Statement

Updating an Angular application from version 12 to 13 resulted in the error "require() of ES Module not supported". Specifically, the issue occurs when requiring the platform-browser module in the main.js file.

The error message suggests changing the require statement to a dynamic import() instead, which is supported in all CommonJS modules.

This issue arises due to Angular 13 using ES Modules as the default module format, while Angular 12 used CommonJS modules.

Additional Information

• Version Information:
  — Node: 16.20.0
  — TypeScript: 4.4.3 or 4.6.0
• Package.json dependencies and devDependencies are provided for reference.

The Solutions:

Solution 1: Remove Angular Packages from the Externals List

When upgrading from Angular 12 to 13, you may encounter the "require() of ES Module not supported" error because by default, Angular 13 only provides Electron Service (MJS) modules.

One possible solution is to review your webpack configuration and ensure that Angular packages are not included in the "externals" list. The "externals" list specifies node modules that need to be exposed in the browser and are excluded from bundling.

If Angular packages are present in this list, remove them to prevent the generation of CommonJS import statements. By doing so, you’ll force webpack to generate ES module import statements, which are compatible with Angular 13.

This change will allow Angular 13 to import and use the necessary modules correctly, resolving the "require() of ES Module not supported" error.

Solution 2: Update to v13.1.4

Attempt updating to version 13.1.4 of Angular to potentially resolve the issue. This resolution has been known to rectify similar issues in the past.

Solution

To fix the "Require() of ES Module not supported" error while updating from Angular 12 to 13, follow these steps:

1. Update Node.js: Ensure you have Node.js version 16 or later installed.
2. Update TypeScript: Update the version in your package.json file to TypeScript 4.7 or the latest compatible with Angular 13.
3. Update Angular Packages: Update all Angular-related packages in your package.json file to their respective Angular 13 versions.
4. Switch to ESM: Ensure your project uses the ECMAScript modules (ESM) format by adding "type": "module" to your tsconfig.json file.
5. Use Import Statements: Replace any instances of require() with the import statement throughout your codebase as Angular 13 uses ESM.
6. Reinstall Packages: Run npm install to install the updated packages.
7. Fix Compatibility Issues: Address any other compatibility issues or deprecations mentioned in the Angular Update Guide for migrating from Angular 12 to 13.
8. Verify: Build and run your application to ensure the issue is resolved.

Remember to refer to the official Angular documentation for detailed update instructions specific to your project.

Video Explanation: