Dynamic require of "google-protobuf" is not supported

[ivegotwings]

Command

serve

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

16.0.0

Description

The error comes when we call the loadFormFields method in the project/schema library. This used to work perfectly fine in version 16. The demo project resembles the structure of the real project that we work on, so we cannot make changes to the code structure or remove the function call.

Minimal Reproduction

1. run- npm run start
2. launch the browser
3. open console

minimal reproduction depo project- https://github.com/ivegotwings/angularclibug

Exception or Error

`
chunk-XD6TBTUO.js:12 Uncaught Error: Dynamic require of "google-protobuf" is not supported
    at chunk-XD6TBTUO.js:12:9
    at projects/schema/src/lib/model/pbjs/extschema/ves.io/schema/errors_pb.js (errors_pb.js:11:12)
    at __require2 (chunk-XD6TBTUO.js:21:50)
    at index.ts:3:15
`

Your Environment

Angular CLI: 17.0.9
Node: 20.10.0
Package Manager: npm 10.2.3
OS: darwin x64

Angular: 17.0.8
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1700.9
@angular-devkit/build-angular   17.0.9
@angular-devkit/core            17.0.9
@angular-devkit/schematics      17.0.9
@angular/cli                    17.0.9
@schematics/angular             17.0.9
rxjs                            7.8.1
typescript                      5.2.2
zone.js                         0.14.2

Anything else relevant?

No response

[alan-agius4]

Whlist there is a problem in the dev-server when using require. It is worth mentioning that dynamic imports that use string literals such as import('./model/pbjs/extschema/ves.io/schema/${entity}/form-fields.js') will not longer work with the esbuild pipeline.

See: evanw/esbuild#56

[ghost]

I think the bug is with Version 17.1.2 still alive...

I got the same error with application builder and @angular-devkit/build-angular version 17.1.2

[davide1995]

Suffering the same problem with Angular 17.1.3:

Uncaught Error: Dynamic require of "@angular/core" is not supported
    at main.js:12:9
    at libs/tod-api/api/authentication.service.js (authentication.service.ts:14:1)
    at __require2 (main.js:15:50)
    at libs/tod-api/api/api.js (api.ts:1:1)
    at __require2 (main.js:15:50)
    at libs/tod-api/index.js (index.ts:1:1)
    at __require2 (main.js:15:50)
    at app.config.ts:6:56

[BastianKamp]

Same error with @angular-devkit/build-angular version 17.2.1

Uncaught Error: Dynamic require of "google-protobuf" is not supported
    at chunk-BIE6XYAC.js:29:9
    at libs/grpc/src/lib/protos/generated/dto_pb.js (dto_pb.js:14:12)
    at __require2 (chunk-BIE6XYAC.js:32:50)
    at grpc-wire.ts:5:37

[BastianKamp]

@alan-agius4 can you open the issue again? As others have noted, it is not solved. I have tested the behavior with 17.1.4. and 17.2.1.

[arobinson]

I'm not sure if this is the same issue, but I'm getting the error while trying get the Angular application to work with our source. The code in question for us, is using a dynamic import to load an Angular module on the fly without using the router:

const lazyLoadDefinition = {
  loadChildren: (): Promise<any> => import('./lazy/some-angular.module').then((m) => m.SomeAngularModule)
};
...

  loadModuleRef(): Observable<NgModuleRef<NwAnyValue>> {
    if (!this.moduleObs) {
      this.moduleObs = this.nwLazyService.dynamicallyLoadModule(this.injector, lazyLoadDefinition).pipe(
        tap((moduleRef) => this.getServiceFromModule(moduleRef)),
        shareReplay(1)
      );
    }
    return this.moduleObs;
  }

This is producing the error:

Failed to load component Error: Dynamic require of "./some-angular.module-IFDBFVNQ.js" is not supported

Which is coming from:

var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
}) : x)(function(x) {
  if (typeof require !== "undefined")
    return require.apply(this, arguments);
  throw Error('Dynamic require of "' + x + '" is not supported');
});

I'm not sure if I need to change something in my tsconfig or I'm hitting this bug.

@angular-devkit/build-angular 17.2.0

[Moccod]

Experiencing same bug in 17.3

Angular CLI: 17.3.0
Node: 20.11.1
Package Manager: npm 10.2.4
OS: win32 x64

Angular: 17.3.0
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, material, platform-browser, platform-browser-dynamic
... platform-server, router, ssr

Package Version

@angular-devkit/architect 0.1703.0
@angular-devkit/build-angular 17.3.0
@angular-devkit/core 17.3.0
@angular-devkit/schematics 17.3.0
@schematics/angular 17.3.0
rxjs 7.8.1
typescript 5.3.3
zone.js 0.14.4`

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}