URL is not defined when adding AudioWorklet in Preact preset

[pyotrr]

Describe the bug

I created a Preact project using yarn create vite and I'm importing my AudioWorklet class as an url using the ?url import syntax. When i try to attach that worklet to my AudioContext i get an Uncaught ReferenceError: URL is not defined in vite's file called client.ts, in this line:
const importMetaUrl = new URL(import.meta.url)
This error occurs when i call AudioContext.audioWorklet.addModule(importedWorkletUrl)
Do you know what could be causing this problem or if there's any way to successfully use worklets in this setup?

Reproduction

https://github.com/pyotrr/vite-audio-worklet-repro

System Info

System:
    OS: macOS 12.0.1
    CPU: (8) arm64 Apple M1
    Memory: 65.42 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v16.13.0/bin/yarn
    npm: 8.1.0 - ~/.nvm/versions/node/v16.13.0/bin/npm
  Browsers:
    Chrome: 104.0.5112.79
    Firefox: 102.0.1
    Safari: 15.1
  npmPackages:
    vite: ^3.0.0 => 3.0.5

Used Package Manager

yarn

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.

[bluwy]

This is because Vite injects HMR code for Processor.ts when being imported, which imports from Vite's client.ts, which isn't compatible in an AudioWorklet environment. Since Worklets are an experimental feature, and they should ideally support common globals like URL, I think this is something we won't support for the time being.

For now you can workaround it by placing the processor JS code inside the public directory, and import the module from there.

[pyotrr]

For now you can workaround it by placing the processor JS code inside the public directory, and import the module from there.

Understandable, thanks!