angular: require() of ES modules is not supported

Hi, thanks for trying out the prerelease and sharing your findings here!

Angular 13 switches its packages over to ESM modules, prompting updates to any dependencies that use the compiler packages directly. The CLI’s @angular-devkit/build-angular has been updated to consume the ESM compiler modules, however it appears that @angular-builders/custom-webpack has a dependency on an older version of @angular-devkit/build-angular that does not work correctly with ESM modules.

I’d suggest that you report this downstream to the maintainers of @angular-builders/custom-webpack as this is not actionable for us.

Keeping this issue open for a while for visibility, as we expect other tooling to also run into these kinds of errors. In particular, @angular-eslint/* is currently also incompatible due to this change.

Solved problem by

1. ng update – to update angular for the local project

2. open package.json to change all the angular items in “dependencies” and “devDependencies” from 12 to 13 ex: “dependencies”: { “@angular/animations”: “~13.1.1”, “@angular/cdk”: “^13.1.1”, “@angular/common”: “~13.1.1”, “@angular/compiler”: “~13.1.1”, “@angular/core”: “~13.1.1”, “@angular/forms”: “~13.1.1”, “@angular/material”: “^13.1.1”, “@angular/platform-browser”: “~13.1.1”, “@angular/platform-browser-dynamic”: “~13.1.1”, “@angular/router”: “~13.1.1”, } “devDependencies”: { “@angular-devkit/build-angular”: “~13.1.1”, “@angular/cli”: “~13.1.1”, “@angular/compiler-cli”: “~13.1.1”, “typescript”: “~4.5.4” }

3. npm install

All done

I’ll close this issue now as all major tooling we’re aware of (Jest, eslint and Nx) have released updates in support of Angular 13. Thanks to everyone involved in making these updates available, your effort is hugely appreciated 🙏

Hope this helps: I had the same problem, until I realized I forgot to update (yes, I updated the package.json manually) ng-packagr which was still v12. After setting v13 everything was fine.

@pinich please use jest-preset-angular@11.0.0-rc.3 in the meanwhile.

jest-preset-angular is also impacted by this because we use downlevel ctor transformer function directly from @angular/compiler-cli via require.

A workaround now that jest-preset-angular adopts Jest async transformer.

It would be nice if there is a fallback somehow for this issue.

Is there any workaround this issue , After updating to Angular 13 our Jest tests unable to run and fail with

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module :
..\@angular\compiler-cli\bundles\index.js        
require() of ES modules is not supported.

@jponeill Please follow https://youtrack.jetbrains.com/issue/WEB-53312 . There was a slight change in the format of *.d.ts files and NgModules are not picked up by our model. Expect a fix in 2021.3 release.

The following issue might be related and require() is used, but I’m not sure why it broke between @angular/compiler-cli@13.0.0-next.9 @angular/compiler@13.0.0-next.9 and @angular/compiler-cli@13.0.0-next.10 @angular/compiler@13.0.0-next.10.

https://github.com/just-jeb/angular-builders/issues/978

I had a similar error. For me the package was old "@angular-devkit/build-angular": "^0.901.15". Update to newest version v13.1.4 fixed the error

I’ve done some research with custom-webpack builder and either I’m missing something or @angular-devkit/architect is not fully compatible with ESM:

An unhandled exception occurred: Must use import to load ES Module: /Users/jeb/angular-builders/packages/custom-webpack/dist/browser/index.js
require() of ES modules is not supported.
require() of /Users/jeb/angular-builders/packages/custom-webpack/dist/browser/index.js from /Users/jeb/angular-builders/node_modules/@angular-devkit/architect/node/node-modules-architect-host.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/jeb/angular-builders/packages/custom-webpack/package.json.

Hope this helps: I had the same problem, until I realized I forgot to update (yes, I updated the package.json manually) ng-packagr which was still v12. After setting v13 everything was fine.

This solved my problem. Thanks!

@FrancescoBorzi thanks for reporting this. I will create a ticket for ng-apimock and investigate

https://github.com/rx-ts/synckit may help.

See https://github.com/angular-eslint/angular-eslint/issues/715#issuecomment-945539868 for example.

And await import() is always available in commonjs on Node 12+.

jest-preset-angular is also impacted by this because we use downlevel ctor transformer function directly from @angular/compiler-cli via require.

A workaround now that jest-preset-angular adopts Jest async transformer.

It would be nice if there is a fallback somehow for this issue.