fix(optimizer): map relative new URL paths to correct relative file location

[guyco3]

fixes. #21422
fixes #8427
fixes #11672
fixes vitejs#362

What is this PR solving?

This PR fixes an issue where Web Workers defined in dependencies using new URL('./worker.js', import.meta.url) fail to load after dependency optimization (Rolldown).

The Problem

In the new dependency optimizer (Rolldown), libraries are bundled into .vite/deps. When a library contains a relative worker constructor, that relative path becomes invalid because the actual worker file remains in the original node_modules directory. Rolldown's internal asset scanner attempts to resolve these paths relative to the new bundle location, leading to "File does not exist" errors and broken worker loading.

The Solution

I added a transform hook to the vite:dep-pre-bundle plugin within rolldownDepPlugin.ts:

• Correct Relative Path: It detects new URL patterns within optimized dependencies and rebases them to the correct relative paths pointing to the original source file.
• Rolldown Bypass: It utilizes both /* @vite-ignore */ and string concatenation ('' + import.meta.url) to make the expression dynamic. This effectively "blinds" Rolldown's static analysis scanner, preventing it from incorrectly attempting to bundle the absolute path as a relative asset.
  • Reference: Rolldown Issue #2745
• Automatic Permissions: It automatically adds the library's asset directory to server.fs.allow, ensuring the dev server permits the browser to fetch the worker via the absolute path.

Unit Test & Housekeeping Updates

• Snapshot Updates: Updated snapshots in packages/vite/src/node/__tests__/plugins/import.spec.ts to reflect minor formatting changes (tabs to spaces) triggered by the project's Prettier configuration. No logic changes were made to these core tests.
• Lockfile: Updated pnpm-lock.yaml to the latest format to resolve workspace integrity issues encountered when adding the new playground test package.

How has this been tested?

I added a new test case in the optimize-deps playground:

1. New Test Package: Created @vitejs/test-dep-with-worker-repro which exports workers from the root and a nested directory.
2. E2E Test: Added assertions in playground/optimize-deps/__tests__/optimize-deps.spec.ts to verify that worker messages are correctly received in the browser logs during dev mode.

---

Summary of Changes

File	Purpose
rolldownDepPlugin.ts	Core Fix: Detects new URL and rebases to absolute paths.
import.spec.ts	Maintenance: Updates snapshots to match current project formatting.
pnpm-lock.yaml	Integrity: Updates workspace dependencies for the new test.
playground/optimize-deps/...	Verification: New E2E test case for the worker fix.

Before vs After Tests

Failed Test Log (Before Fix)

base) guycohen@Guys-MacBook-Air vite % pnpm vitest --config vitest.config.e2e.ts playground/optimize-deps -t "worker"

 DEV  v4.0.17 /Users/guycohen/dev/vite

--------------------------------------------------x

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Tests 1 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 FAIL  playground/optimize-deps/__tests__/optimize-deps.spec.ts > should fix standard web worker URLs in optimized dependencies
AssertionError: expected '[vite] connecting...\n%cDownload the …' to match /Message from lib: worker-success/

- Expected: 
/Message from lib: worker-success/

+ Received: 
"[vite] connecting...
%cDownload the React DevTools for a better development experience: https://react.dev/link/react-devtools font-weight:bold
ok
ok
Module \"fs\" has been externalized for browser compatibility. Cannot access \"fs.readFileSync\" in client code. See https://vite.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
dep-with-builtin-module-esm TypeError: (0 , import_browser_external_fs.readFileSync) is not a function
    at http://localhost:5173/node_modules/.vite/deps/@vitejs_test-dep-with-builtin-module-esm.js?v=a8c2d33d:8:46
Module \"path\" has been externalized for browser compatibility. Cannot access \"path.join\" in client code. See https://vite.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
dep-with-builtin-module-esm TypeError: import_browser_external_path.default.join is not a function
    at http://localhost:5173/node_modules/.vite/deps/@vitejs_test-dep-with-builtin-module-esm.js?v=a8c2d33d:13:39
Module \"fs\" has been externalized for browser compatibility. Cannot access \"fs.readFileSync\" in client code. See https://vite.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
Module \"path\" has been externalized for browser compatibility. Cannot access \"path.join\" in client code. See https://vite.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
dep-with-builtin-module-cjs TypeError: path.join is not a function
    at http://localhost:5173/node_modules/.vite/deps/@vitejs_test-dep-with-builtin-module-cjs.js?v=e1b01b58:9:8
    at http://localhost:5173/node_modules/.vite/deps/chunk-Dlsxdu6H.js?v=4e0e41d7:9:48
    at http://localhost:5173/node_modules/.vite/deps/@vitejs_test-dep-with-builtin-module-cjs.js?v=e1b01b58:19:16
Module \"fs\" has been externalized for browser compatibility. Cannot access \"fs.readFileSync\" in client code. See https://vite.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[vite] connected.
Failed to load resource: the server responded with a status of 404 (Not Found)"

 ❯ playground/optimize-deps/__tests__/optimize-deps.spec.ts:377:6
    375|   await expect
    376|     .poll(() => browserLogs.join('\n'))
    377|     .toMatch(/Message from lib: worker-success/)
       |      ^
    378|   await expect
    379|     .poll(() => browserLogs.join('\n'))

Caused by: Error: Matcher did not succeed in time.
 ❯ playground/optimize-deps/__tests__/optimize-deps.spec.ts:375:3

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯


 Test Files  1 failed | 1 skipped (2)
      Tests  1 failed | 50 skipped (51)
   Start at  15:49:28
   Duration  5.83s (transform 139ms, setup 525ms, import 141ms, tests 3.33s, environment 0ms)

 FAIL  Tests failed. Watching for file changes...
       press h to show help, press q to quit

Test Log (After Fix)

```bash (base) guycohen@Guys-MacBook-Air vite % pnpm vitest --config vitest.config.e2e.ts playground/optimize-deps -t "worker"

DEV v4.0.17 /Users/guycohen/dev/vite

--------------------------------------------------*

Test Files 1 passed | 1 skipped (2)
Tests 1 passed | 50 skipped (51)
Start at 15:46:53
Duration 3.70s (transform 86ms, setup 720ms, import 68ms, tests 883ms, environment 0ms)

PASS Waiting for file changes...
press h to show help, press q to quit

</details>

[guyco3]

I've implemented the requested changes

While updating the playground tests, I ran into an issue where the test image was being automatically inlined as a Data URL because of its small size. This made it impossible to verify the rebased file path.

I considered a few options to fix this:

1. Adding a larger image (>4KB): Decided against this to avoid bloating the repository history with binary data.
2. Setting assetsInlineLimit: 0: I was concerned this might have unintended side effects on other existing or future tests in the shared optimize-deps playground.

How I proceeded:
I focused the E2E playground tests strictly on Worker assets, which are easy to verify and aren't subject to inlining. However, I have added comprehensive coverage for Images, WASM, and nested asset paths in the unit test suite (rolldownDepPlugin.spec.ts).

Is this test coverage fine, or would it be better if I force the assetsInlineLimit: 0 in the playground config to keep the image playground tests? Or maybe there is a better way...

[sapphi-red]

Thanks for updating!

I think we can copy https://github.com/vitejs/vite/blob/main/playground/assets/nested/asset.png and use it in the playground. It's already included in the repository and git will dedupe it, so it won't bloat the repository.

[guyco3]

oh yeah good suggestion, I forgot git does that. I added the additional check for the image asset in the playground test. I think the PR is ready, open to additional comments/modifications though

[pkg-pr-new]

Open in StackBlitz

pnpm add https://pkg.pr.new/vitejs/vite/@vitejs/plugin-legacy@21434

npm i https://pkg.pr.new/vitejs/vite/@vitejs/plugin-legacy@21434

yarn add https://pkg.pr.new/vitejs/vite/@vitejs/plugin-legacy@21434.tgz

pnpm add https://pkg.pr.new/vitejs/vite@21434

npm i https://pkg.pr.new/vitejs/vite@21434

yarn add https://pkg.pr.new/vitejs/vite@21434.tgz

commit: 88fa33c

[sapphi-red]

Thank you!

[sapphi-red]

Just note that this PR does not fix #21422. That one is different from the other ones I linked. It needs to add a library mode specific transform to output new Worker(new URL('...', import.meta.url)) in a bundler-friendly way.