Inline worker code incompatibility with Playwright’s WebKit

[lozinsky]

Describe the bug

The current implementation of inline workers generated by Vite is not compatible with Playwright’s WebKit browser. Specifically, the WorkerWrapper code fails when trying to create workers using a Blob URL in WebKit, leading to errors during tests.

The code in question is as follows:

function WorkerWrapper(options) {
  let objURL;
  try {
    objURL = blob && (self.URL || self.webkitURL).createObjectURL(blob);
    if (!objURL) throw "";
    const worker = new Worker(objURL, {
      name: options == null ? void 0 : options.name
    });
    worker.addEventListener("error", () => {
      (self.URL || self.webkitURL).revokeObjectURL(objURL);
    });
    return worker;
  } catch (e) {
    return new Worker(
      "data:text/javascript;base64," + encodedJs,
      {
        name: options == null ? void 0 : options.name
      }
    );
  } finally {
    objURL && (self.URL || self.webkitURL).revokeObjectURL(objURL);
  }
}

The issue arises because the code attempts to immediately revoke the Blob URL in the finally block:

objURL && (self.URL || self.webkitURL).revokeObjectURL(objURL);

This behavior invalidates the Blob URL before the worker can properly utilize it. Playwright’s WebKit (and likely other WebKit browsers) require the Blob URL to remain valid for the worker’s lifecycle, and prematurely revoking it causes failures. microsoft/playwright#33794 (comment)

What do you think, should it be fixed on the Vite side?

Reproduction

https://github.com/lozinsky/vite-inline-worker-playwright-webkit

Steps to reproduce

No response

System Info

System:
  OS: macOS 15.2
  CPU: (8) arm64 Apple M1 Pro
  Memory: 189.03 MB / 16.00 GB
  Shell: 3.7.1 - /opt/homebrew/bin/fish
Binaries:
  Node: 20.12.2
  npm: 10.5.0
Browsers:
  Chrome: 131.0.6778.265
  Safari: 18.2
npmPackages:
  vite: 6.0.8 => 6.0.8

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[sapphi-red]

Fixing on Vite side makes sense to me.
Probably calling (self.URL || self.webkitURL).revokeObjectURL(self.location.href); at the top of the worker script for classic workers would work.

vite/packages/vite/src/node/plugins/worker.ts

Line 336 in c0f72a6

`'URL.revokeObjectURL(import.meta.url);',`

[aKzenT]

Having the same problem. Did you find any workaround that we could use until it is fixed? @lozinsky

[lozinsky]

Did you find any workaround that we could use until it is fixed?

Unfortunately, no 😞

[aKzenT]

@sapphi-red you mentioned adding revokeObjectURL to the worker script of classic workers. In your references code I see that for modern workers the code alredy calls URL.revokeObjectURL(import.meta.url);. Does that mean that the call to revokeObjectURL in the worker wrapper is only necessary for classic workers as modern workers already take care of it themselves?

[sapphi-red]

@aKzenT
No, I mean the revokeObjectURL call should be removed from the finally clause and called inside the worker code instead, like it's done for the module worker.

[aKzenT]

thanks for the clarification, I didn't realize that "classic" workers are still the default in vite. So although our project was configured for ESM, the workers were not using it. So in my case the 'workarround' is simply to switch to module workers:

    worker: {
        format: 'es',
    },