Vite dev server not using the browser object from the package.json

[robertkocsis]

Command

serve

Is this a regression?

I don't think si

The previous version in which this bug was not present was

No response

Description

Hello, I've came upon this bug while trying to migrate to the new application builder.
As far as I understand, the old webpack based builder provided polyfills by default but the new one doesn't.

We are using the crypto node js package which was polyfilled in the old builder to crypto-browserify and that also has a dependency inside stream which was also polyfilled making the package work without problems.

After migrating to the new builder, the polyfills didn't work, neither with the dev server or the normal builder.

I looked around and found out that you need to provide the browser field in the package.json to the esbuild based builder, so I've did that and the errors are gone when I build the application host it with something like python3 -m http.server 8080.

The problem is that since the dev server is using vite, the error is still present there, it's not handling the dependency aliasing from the browser field, which causes the package call I have fail because of the missing dependency.

Minimal Reproduction

I've made a repo to reproduce the issue:

check out the repo

npm run install

npm start

Open localhost:4200 , go to the console and see that there is a failing function call because a dependency is undefined

See that Transform here is supposed to come from the stream dependency:

There is also all these logs in the console

close the dev server

npm run build

create a small http server from with the contents of the dist/browser, I've used this: python3 -m http.server 8080, but you can also use nginx etc.

open the browser and see that the function calls work in the console.

Your Environment

I've created a new repo here and I'm using the latest angular version but it's also present in 18.2.11


     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 19.2.7
Node: 20.19.0
Package Manager: npm 10.8.2
OS: darwin arm64

Angular: 19.2.6
... common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1902.7
@angular-devkit/build-angular   19.2.7
@angular-devkit/core            19.2.7
@angular-devkit/schematics      19.2.7
@angular/cli                    19.2.7
@schematics/angular             19.2.7
rxjs                            7.8.2
typescript                      5.7.3
zone.js                         0.15.0

Anything else relevant?

I've looked around the other issues and saw that people were suggesting adding the package to the prebundle exceptions but I don't want that, the function doesn't work that way.

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