Vite dev server failure referencing local libraries

[johncrim]

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

browser builder

Description

I'm trying to migrate to the new builders ( browser -> application or browser -> esbuild-browser), and building works fine, however trying to use the dev server ng serve I receive errors like the following:

Error: Failed to resolve entry for package "@acme/components". The package may have incorrect main/module/exports specified in its package.json.
    at packageEntryFailure (file:///C:/src/acme/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:46637:15)
    at resolvePackageEntry (file:///C:/src/acme/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:46634:3)
    at tryNodeResolve (file:///C:/src/acme/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:46450:16)
    at ResolveIdContext.resolveId (file:///C:/src/acme/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:46200:19)
    at PluginContainer.resolveId (file:///C:/src/acme/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:49015:17)
    at async file:///C:/src/acme/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:66266:15
    at async file:///C:/src/acme/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:49930:14
    at async addManuallyIncludedOptimizeDeps (file:///C:/src/acme/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:50981:23)
    at async createDepsOptimizer (file:///C:/src/acme/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:50149:5)
    at async initDepsOptimizer (file:///C:/src/acme/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:50044:5) {
  code: 'ERR_RESOLVE_PACKAGE_ENTRY_FAIL'
}

This occurs for all projects. Our file organization is:

+ root/workspace
    + apps
    + libs
    + node_modules
    + dist   
        + node_modules

All of the failing references with initDepsOptimizer at the bottom of the call stack are our internal libraries, which are built into ./dist/node_modules.

As I said above - build works fine, it's only the vite dev server where I'm seeing this problem.

Minimal Reproduction

I have tried creating a new project that is organized similarly to provide a minimal repro case, but so far the dev server works in that project. It doesn't appear to be triggering initDepsOptimizer() - any idea how I can force that to be triggered? Or is there a way to provide a vite config to skip optimizing our internal libs?

Exception or Error

Error: Failed to resolve entry for package "@acme/components". The package may have incorrect main/module/exports specified in its package.json.
    at packageEntryFailure (file:///C:/src/acme/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:46637:15)
    at resolvePackageEntry (file:///C:/src/acme/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:46634:3)
    at tryNodeResolve (file:///C:/src/acme/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:46450:16)
    at ResolveIdContext.resolveId (file:///C:/src/acme/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:46200:19)
    at PluginContainer.resolveId (file:///C:/src/acme/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:49015:17)
    at async file:///C:/src/acme/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:66266:15
    at async file:///C:/src/acme/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:49930:14
    at async addManuallyIncludedOptimizeDeps (file:///C:/src/acme/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:50981:23)
    at async createDepsOptimizer (file:///C:/src/acme/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:50149:5)
    at async initDepsOptimizer (file:///C:/src/acme/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:50044:5) {
  code: 'ERR_RESOLVE_PACKAGE_ENTRY_FAIL'
}

Your Environment

Angular CLI: 19.0.2
Node: 22.6.0
Package Manager: yarn 4.5.3
OS: win32 x64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1900.2
@angular-devkit/build-angular   19.0.2
@angular-devkit/core            19.0.2
@angular-devkit/schematics      19.0.2
@angular/cdk                    19.0.0
@angular/cli                    19.0.2
@schematics/angular             19.0.2
ng-packagr                      19.0.1
rxjs                            7.8.1
typescript                      5.6.3
webpack                         5.96.1
zone.js                         0.15.0

Anything else relevant?

No response

[johncrim]

I've found a solution to this error - these 2 options work:

1. ng serve --configuration=production
2. ng serve --prebundle=false

These 2 options do not work:

1. Set prebundle=false in angular.config,

Results in same error as before.

2. exclude the private/local libraries in angular.config via:

        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "buildTarget": "app:build"
          },
          "configurations": {
            "development": {
              "prebundle": {
                "exclude": [
                  "@acme/model",
                  "@acme/util",
                  "@acme/ui-components",
                  "@acme/ui-tracking",
                  "@acme/search"
                ]
              }
            }
          }
        },

Unfortunately wildcards can't be used for exclusion, so they each have to be explicitly added (most of our apps have a longer list of internal dependencies - this is a test app); and when I exclude a lib from pre-bundling I get a long list of yellow warnings on startup, one line for each module, eg:

Watch mode enabled. Watching for file changes...
NOTE: Raw file sizes do not reflect development server per-request transformations.
Failed to resolve dependency: @acme/model/testing, present in 'optimizeDeps.include'
Failed to resolve dependency: @acme/search/analyzer, present in 'optimizeDeps.include'
Failed to resolve dependency: @acme/search/memory, present in 'optimizeDeps.include'
Failed to resolve dependency: @acme/ui-components/animation, present in 'optimizeDeps.include'
Failed to resolve dependency: @acme/ui-components/base, present in 'optimizeDeps.include'
Failed to resolve dependency: @acme/ui-components/bind, present in 'optimizeDeps.include'
Failed to resolve dependency: @acme/ui-components/button, present in 'optimizeDeps.include'
Failed to resolve dependency: @acme/ui-components/chart, present in 'optimizeDeps.include'
Failed to resolve dependency: @acme/ui-components/combobox, present in 'optimizeDeps.include'
Failed to resolve dependency: @acme/ui-components/debug, present in 'optimizeDeps.include'
Failed to resolve dependency: @acme/ui-components/dialog, present in 'optimizeDeps.include'
Failed to resolve dependency: @acme/ui-components/dock, present in 'optimizeDeps.include'
Failed to resolve dependency: @acme/ui-components/events, present in 'optimizeDeps.include'
Failed to resolve dependency: @acme/ui-components/focus, present in 'optimizeDeps.include'
Failed to resolve dependency: @acme/ui-components/form, present in 'optimizeDeps.include'
Failed to resolve dependency: @acme/ui-components/icon, present in 'optimizeDeps.include'
Failed to resolve dependency: @acme/ui-components/list, present in 'optimizeDeps.include'
Failed to resolve dependency: @acme/ui-components/list0, present in 'optimizeDeps.include'
Failed to resolve dependency: @acme/ui-components/mobile-viewport, present in 'optimizeDeps.include'
Failed to resolve dependency: @acme/ui-components/pill, present in 'optimizeDeps.include'
Failed to resolve dependency: @acme/ui-components/popup, present in 'optimizeDeps.include'
Failed to resolve dependency: @acme/ui-components/progress-bar, present in 'optimizeDeps.include'
Failed to resolve dependency: @acme/ui-components/push, present in 'optimizeDeps.include'
Failed to resolve dependency: @acme/ui-components/ripple, present in 'optimizeDeps.include'
Failed to resolve dependency: @acme/ui-components/scroll-retract, present in 'optimizeDeps.include'
Failed to resolve dependency: @acme/ui-components/scrolling, present in 'optimizeDeps.include'
Failed to resolve dependency: @acme/ui-components/select, present in 'optimizeDeps.include'
Failed to resolve dependency: @acme/ui-components/selection, present in 'optimizeDeps.include'
Failed to resolve dependency: @acme/ui-components/sticky, present in 'optimizeDeps.include'
Failed to resolve dependency: @acme/ui-components/sticky-retract, present in 'optimizeDeps.include'
Failed to resolve dependency: @acme/ui-components/table-list, present in 'optimizeDeps.include'
Failed to resolve dependency: @acme/ui-components/tooltip, present in 'optimizeDeps.include'
Failed to resolve dependency: @acme/ui-components/tray, present in 'optimizeDeps.include'
Failed to resolve dependency: @acme/ui-components/tree, present in 'optimizeDeps.include'
Failed to resolve dependency: @acme/ui-components/virtual-list, present in 'optimizeDeps.include'
Failed to resolve dependency: @acme/ui-components/virtual-scroll, present in 'optimizeDeps.include'
Failed to resolve dependency: @acme/ui-tracking/core, present in 'optimizeDeps.include'
Failed to resolve dependency: @acme/util-ng/browser, present in 'optimizeDeps.include'
Failed to resolve dependency: @acme/util-ng/init, present in 'optimizeDeps.include'

Followed by these errors when a page is requested:

2:31:24 PM [vite] Pre-transform error: Failed to resolve import "@acme/ui-components/animation" from ".angular/vite-root/test-ui/main.js". Does the file exist?
2:31:24 PM [vite] Pre-transform error: Failed to resolve import "@acme/search/analyzer" from ".angular/vite-root/test-ui/chunk-RQHBEF6L.js". Does the file exist?
2:31:24 PM [vite] Internal server error: Failed to resolve import "@acme/ui-components/animation" from ".angular/vite-root/test-ui/main.js". Does the file exist?
  Plugin: vite:import-analysis
  File: C:/src/acme/.angular/vite-root/test-ui/main.js:11:34
  32 |  import { BrowserModule } from "@angular/platform-browser";
  33 |  import { RouterModule as RouterModule2 } from "@angular/router";
  34 |  import { UiAnimationModule } from "@acme/ui-components/animation";
     |                                     ^
  35 |  import { UiButtonModule as UiButtonModule2 } from "@acme/ui-components/button";
  36 |  import { UiDebugModule } from "@acme/ui-components/debug";
      at TransformPluginContext._formatError (file:///C:/src/acme/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:49255:41)
      at TransformPluginContext.error (file:///C:/src/acme/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:49250:16)
      at normalizeUrl (file:///C:/src/acme/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:64041:23)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async file:///C:/src/acme/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:64173:39
      at async Promise.all (index 11)
      at async TransformPluginContext.transform (file:///C:/src/acme/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:64100:7)
      at async PluginContainer.transform (file:///C:/src/acme/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:49096:18)
      at async loadAndTransform (file:///C:/src/acme/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:51929:27)
      at async viteTransformMiddleware (file:///C:/src/acme/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:61881:24)
2:31:24 PM [vite] Pre-transform error: Failed to resolve import "@acme/search/analyzer" from ".angular/vite-root/test-ui/chunk-RQHBEF6L.js". Does the file exist?

Before this issue, I wasn't familiar with pre-bundling, but here's some info for anyone else:
https://vite.dev/guide/dep-pre-bundling
Another issue: Vite dev server with npm workspaces not reloading on project reference update #27552

I do have workarounds, but I also think there is some room for improvement. I still don't know why my repro works and my real code is having these errors. I'm willing to continue on the repro case if you can give me any direction on why I seem to not be triggering pre-bundling in my repro case.

Other questions:

1. Do I want pre-bundling? Based on the docs, it seems desirable for external libs but not for internal ones, b/c they might change during ng build lib --watch
2. Is there a way to omit the internal libs from optimizeDeps.include?

[alan-agius4]

These errors are quite unusual. The fact that Vite is unable to resolve some of these libraries suggests there may be an issue with the project layout, structure, configuration or potentially a bug. Unfortunately, we will need a reproduction of the issue in order to investigate it further.

Unfortunately, wildcards can't be used for exclusion, so each library needs to be explicitly added.

While we could potentially support globbing for exclusions, this could slow down the build process. Each non-relative import would need to be matched against a list of globs, making it a more expensive operation. This would no longer be a constant-time operation, which could negatively impact build performance.

Do I want pre-bundling? Based on the docs, it seems desirable for external libs but not for internal ones, b/c they might change during ng build lib --watch

If the libraries are in a different workspace, you'll need to use prebundle.exclude to exclude them. However, if they are within the same workspace and you are using TypeScript path mappings to reference the dist folder, there is no need for this.

Is there a way to omit the internal libs from optimizeDeps.include?
Yes, you can exclude internal libraries by specifying them in prebundle.exclude. Anything listed there will be omitted from optimizeDeps.include.

[johncrim]

Thank you for the information @alan-agius4. I'm currently in the process of debugging the vite pre-bundling process to figure out why I'm seeing this problem in my real-world project, and not in my repro app. I'll follow up with a repro case once I figure it out.

However, if they are within the same workspace and you are using TypeScript path mappings to reference the dist folder, there is no need for this.

The imports that are causing these errors are in the same workspace, and we are using TypeScript path mappings like normal. They're working correctly for the build, just not for prebundling.

While we could potentially support globbing for exclusions, this could slow down the build process. Each non-relative import would need to be matched against a list of globs, making it a more expensive operation. This would no longer be a constant-time operation, which could negatively impact build performance.

Right now it looks like the prebundle.exclude array is added to the vite config optimizeDeps.exclude as is, and the optimizeDeps.include array is built up manually somehow. I would think the intersection of the exclude list and the include list should be removed from the include list, or a prebundle.exclude wildcard could be matched against the include list. I think the warnings are occurring because of the duplicates between the include and exclude lists, and I think a user would expect any entries they configure in prebundle.exclude to be omitted from the automatically created include list.

[johncrim]

Update on my debugging process (still trying to create a repro case, but to do that I need to figure out what is breaking in my real world project).

• In my real-world project, in angular/build BundlerContext.#performBundle(), my internal project imports are being added to externalImports.browser. Subsequently they're copied to the optimizeDeps.include array, and the vite prebundling logic throws b/c it can't find those libraries - it only resolves libraries in ./node_modules.

• In my work-in-progress repro case, which is structurally similar to our real world project but doesn't yet reproduce the bug, my internal project imports are not being added to externalImports.browser by BundlerContext.#performBundle(). Only external imports (eg @angular/core) are added to the externalImports.browser set. So the vite dev server prebundling works, because it's not trying to resolve any dependencies that it can't find.

So, my next step is to figure out why my real world project is identifying internal imports as external ones.