require() of ES modules is not supported

Which @angular/* package(s) are the source of the bug?

compiler

Is this a regression?

Yes

Description

It looks like a change between 13.0.0-next.9 and 13.0.0-next.10 breaks using @graphql-tools/webpack-loader with @angular-builders/custom-webpack. (PR #43431 ?)

To reproduce:

npm i -g @angular/cli@13.0.0-next.9

1 ng new graphql 2. npm i @angular-builders/custom-webpack --save-dev 3. npm i @graphql-tools/webpack-loader 4. Change angular.json line to “builder”: “@angular-builders/custom-webpack:browser” 5. Create extra-webpack.config.js in project root directory module.exports = { module: { rules: [ { test: /.(graphql|gql)$/, exclude: /node_modules/, loader: ‘@graphql-tools/webpack-loader’ } ] } }

… run ng build and get error: “An unhandled exception occurred: Must use import to load ES Module”

If I run npm i @angular/compiler-cli@13.0.0-next.9 @angular/compiler@13.0.0-next.9 and then ng build again the error goes away.

(This might be an issue w/ @graphql-tools/webpack-loader and I’d appreciate any suggestions of how to handle it)

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

An unhandled exception occurred: Must use import to load ES Module: /Users/jimoneill/WebstormProjects/graphql/node_modules/@angular/compiler-cli/bundles/index.js
require() of ES modules is not supported.
require() of /Users/jimoneill/WebstormProjects/graphql/node_modules/@angular/compiler-cli/bundles/index.js from /Users/jimoneill/WebstormProjects/graphql/node_modules/@angular-builders/custom-webpack/node_modules/@angular-devkit/build-angular/src/webpack/configs/common.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/jimoneill/WebstormProjects/graphql/node_modules/@angular/compiler-cli/package.json.

See "/private/var/folders/rx/t07d1gy51252srmyqqngvp840000gn/T/ng-6zi4GO/angular-errors.log" for further details.
jimon

Please provide the environment you discovered this bug in

Angular CLI: 13.0.0-next.9
Node: 14.18.1
Package Manager: npm 6.14.15
OS: darwin x64

Angular: 13.0.0-rc.0
... animations, common, core, forms, platform-browser
... platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1202.10
@angular-devkit/build-angular   13.0.0-next.9
@angular-devkit/core            12.2.10
@angular-devkit/schematics      13.0.0-next.9
@angular/cli                    13.0.0-next.9
@angular/compiler               13.0.0-next.15
@angular/compiler-cli           13.0.0-next.15
@schematics/angular             13.0.0-next.9
rxjs                            7.4.0
typescript                      4.4.4

Anything else?

No response

[JoostK]

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.

[leonzhang51]

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