Skip to content

webpack-based dev-server crashing when loading ESM based proxy.conf.mjs #33652

Description

@vz-tl

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

20

Description

We're on upgrading our mono-repo hosting several Angular apps from NG20 to NG21, where some apps are using esbuild-based application-builder and some are still stuck with webpack.

For the webpack based apps, we encounter an error crashing the local (ssr) dev-server on startup:

Must use import to load ES Module: /home/.../proxy.conf.mjs
require() of ES modules is not supported.
require() of /home/.../proxy.conf.mjs from /home/lampert/projects/hilti/hdms-frontend/node_modules/@angular/build/src/utils/load-proxy-config.js is an ES module file as it is a .mjs file whose nearest parent package.json contains "type": "module" which defines all .mjs files in that package scope as ES modules.
Instead change the requiring code to use import(), or remove "type": "module" from /home/.../package.json.

As to be seen in the above message, the proxy-config we're using is in ESM format.

application-builder/ esbuild based dev-server seems not being affected.

I tried to debug the issue and tracked it down to the following location:
node_modules/@angular/build/src/utils/load-proxy-config.js:
https://github.com/angular/angular-cli/blob/21.0.x/packages/angular/build/src/utils/load-proxy-config.ts#L57

      try {
        proxyConfiguration = await import(proxyPath);
      } catch (e) {
        assertIsError(e);
        if (e.code !== 'ERR_REQUIRE_ASYNC_MODULE') {
          throw e;
        }

        proxyConfiguration = await loadEsmModule<{ default: unknown }>(pathToFileURL(proxyPath));
      }

The above logic will throw on any error with a different code than ERR_REQUIRE_ASYNC_MODULE, but in my case the error code is ERR_REQUIRE_ESM.

Looking at the v20 version of
https://github.com/angular/angular-cli/blob/20.3.x/packages/angular/build/src/utils/load-proxy-config.ts#L69
the additional error code is still present

        if (e.code === 'ERR_REQUIRE_ESM' || e.code === 'ERR_REQUIRE_ASYNC_MODULE') {
          proxyConfiguration = await loadEsmModule<{ default: unknown }>(pathToFileURL(proxyPath));
          break;
        }

After locally patching node_modules/@angular/build/src/utils/load-proxy-config.js dev-server started working again with a fully functional proxy config.

So I'm requesting to add the error code back to make webpack-based dev servers with esm proxy configs working again. Thx in advance!

Minimal Reproduction

Exception or Error


Your Environment

Angular CLI       : 21.2.19
Angular           : 21.2.18
Node.js           : 24.15.0
Package Manager   : npm 11.12.1
Operating System  : linux x64

┌───────────────────────────────┬───────────────────┬───────────────────┐
│ Package                       │ Installed Version │ Requested Version │
├───────────────────────────────┼───────────────────┼───────────────────┤
│ @angular-devkit/build-angular │ 21.2.19           │ 21.2.19           │
│ @angular-devkit/core          │ 21.2.19           │ 21.2.19           │
│ @angular-devkit/schematics    │ 21.2.19           │ 21.2.19           │
│ @angular/cdk                  │ 21.2.14           │ 21.2.14           │
│ @angular/cli                  │ 21.2.19           │ 21.2.19           │
│ @angular/common               │ 21.2.18           │ 21.2.18           │
│ @angular/compiler             │ 21.2.18           │ 21.2.18           │
│ @angular/compiler-cli         │ 21.2.18           │ 21.2.18           │
│ @angular/core                 │ 21.2.18           │ 21.2.18           │
│ @angular/forms                │ 21.2.18           │ 21.2.18           │
│ @angular/google-maps          │ 21.2.14           │ 21.2.14           │
│ @angular/language-service     │ 21.2.18           │ 21.2.18           │
│ @angular/platform-browser     │ 21.2.18           │ 21.2.18           │
│ @angular/platform-server      │ 21.2.18           │ 21.2.18           │
│ @angular/router               │ 21.2.18           │ 21.2.18           │
│ @angular/ssr                  │ 21.2.18           │ 21.2.18           │
│ @angular/youtube-player       │ 21.2.14           │ 21.2.14           │
│ @schematics/angular           │ 21.2.19           │ 21.2.19           │
│ ng-packagr                    │ 21.2.5            │ 21.2.5            │
│ rxjs                          │ 7.8.2             │ 7.8.2             │
│ typescript                    │ 5.9.3             │ 5.9.3             │
│ zone.js                       │ 0.15.1            │ 0.15.1            │
└───────────────────────────────┴───────────────────┴───────────────────┘

Anything else relevant?

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions