Dynamic require of "google-protobuf" is not supported

[danielalexis]

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

No response

Description

This is the same as #26833. As others have pointed this out, it still doesnt work

Minimal Reproduction

Minimal reproduction on the related issue

Exception or Error

Uncaught Error: Dynamic require of "google-protobuf" is not supported

Your Environment

Angular CLI: 18.0.6
Node: 20.12.1
Package Manager: npm 10.8.1
OS: win32 x64

Angular: 18.0.5
... animations, cdk, common, compiler, compiler-cli, core, forms
... localize, material, platform-browser
... platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------      
@angular-devkit/architect       0.1800.6
@angular-devkit/build-angular   18.0.6
@angular-devkit/core            18.0.6
@angular-devkit/schematics      18.0.6
@angular/cli                    18.0.6
@schematics/angular             18.0.6
rxjs                            7.8.1
typescript                      5.4.5
zone.js                         0.14.7

Anything else relevant?

No response

[alan-agius4]

This issue arises because parts of the application are written in CommonJS, as seen in this file.

During development, external dependencies are not bundled, causing the require statement to be transformed into a dynamic require.

There are two possible solutions to resolve this:

1. Rewrite these files in ECMAScript Modules (ESM) since CommonJS (CJS) is intended for Node.js environments.

2. Exclude google-protobuf from being prebundled, which will prevent the need for dynamic requires. Update your serve configuration in angular.json as follows:

"serve": {
  "executor": "@angular-devkit/build-angular:dev-server",
  "options": {
    "prebundle": {
      "exclude": [
        "google-protobuf",
        "google-protobuf/google/protobuf/any_pb.js"
      ]
    }
  }
}

By implementing one of these solutions, you can address the issue of dynamic requires during development.

[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.}