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
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
Please provide the environment you discovered this bug in
Anything else?
No response