"document" is not defined for xxxx.wasm?url

[nine-fox]

Describe the bug

Hi there,

the following error is fired when I use latest version 3.0.9 to compile the following code in production mode:

import xxxx from "../../xxx.wasm?url";

The error is as follows.
"document" is not defined

So I switch back to old version 2.9.x and the error disappear

After some investigation, I found it is caused by the changeset:

• fix: avoid using import.meta.url for relative assets if output is not ESM (fixes plugin-legacy Unexpected token import  #9297) (fix: avoid using import.meta.url for relative assets if output is not ESM (fixes #9297) #9381)

The following code doesn't check document variable:

const getRelativeUrlFromDocument = (relativePath: string, umd = false) =>
getResolveUrl(
'${relativePath}', ${ umd ? typeof document === 'undefined' ? location.href : : '' }document.currentScript && document.currentScript.src || document.baseURI
)

So I suggest to add a simple "typeof document !== 'undefined'" in the last sentence.

Reproduction

https://stackblitz.com/edit/vitejs-vite-85cthg?file=vite.config.js

run "npm run build" then "vite preview"

System Info

"document" is not defined

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.

[github-actions]

Hello @nine-fox. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with need reproduction will be closed if they have no activity within 3 days.

[nine-fox]

Hi, there, it is produced in https://stackblitz.com/edit/vitejs-vite-85cthg?file=vite.config.js

[nine-fox]

Hello @nine-fox. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with need reproduction will be closed if they have no activity within 3 days.

https://stackblitz.com/edit/vitejs-vite-85cthg?file=vite.config.js

[sapphi-red]

No error happens with your reproduction.

[sapphi-red]

It does not happpen with the following config, too.

import { defineConfig } from "vite"

export default defineConfig({
  base: '',
  build: {
    assetsInlineLimit: 0
  }
})

[nine-fox]

No error happens with your reproduction.

Hi Thanks for your investigation. After run vite build and then vite preview, the error will be in console tab(developer tools). I am using the latest chrome.

My finding is that, document is unrecognized under worker thread. After I change generation from iife to es, the error disappear.

[sapphi-red]

Yes, I did vite build and vite preview. It does not reproduce.

[nine-fox]

Yes, I did vite build and vite preview. It does not reproduce.
vite-project.zip

Hi, just found SlackBlitz's source code is incorrect, that's not the latest version I did last night. Not sure why, I guess it is a network issue due to China Firewall.

So I did it again. See this attached file, please.

Sorry for the inconvenience.

[sapphi-red]

Please provide it with a GitHub repository or StackBlitz.

[nine-fox]

Please provide it with a GitHub repository or StackBlitz.

Would u like to try https://stackblitz.com/edit/vitejs-vite-85cthg?file=vite.config.js again？thx

[sapphi-red]

I was able to reproduce with that one.

[schickling]

It does not happpen with the following config, too.

import { defineConfig } from "vite"

export default defineConfig({
  base: '',
  build: {
    assetsInlineLimit: 0
  }
})

While given this a try, I've noticed that base: '.' also works but base: './' doesn't. Hopefully this is helpful to someone. (Not sure though whether this is intentional behaviour or should be fixed as well.)

[mustafa0x]

I have a similar error, using vite, svelte, web worker (via comlink).

When I edit the svelte component (so it seems to be caused by HMR) I see the error below:

client.ts:288 Uncaught (in promise) ReferenceError: document is not defined
    at hasErrorOverlay (client.ts:288:3)
    at handleMessage (client.ts:150:28)
    at WebSocket.<anonymous> (client.ts:91:5)

Adding self.document = {querySelectorAll(){return []}} to the web worker silences the error.

[seanaye]

Are there any updates for this? The self.document = {querySelectorAll(){return []}} is put after the usage of document by the bundler so it still breaks for me. Inlining is also not an option

[seanaye]

for anyone looking best way ive found is create a shim.js which contains self.document = {querySelectorAll(){return []}}

Then in first line of worker, import "./shim.js"

[RSWilli]

for me this wasn't enough, since the subsequent code needed document.baseURI to create an URL, so I added the following to my shim.mts:

// @ts-ignore
self.document = {
    baseURI: location.origin
}

[seo-rii]

I believe this bug is still happening on 4.3.0-beta.7. Is the patch released?

[patak-dev]

@seo-rii your prev reproduction seems fine now https://stackblitz.com/edit/vitejs-vite-mmhfr5. Would you open a new issue with another minimal repro if you still see something wrong?

[seo-rii]

Oh, I'm sorry. It was slightly diffrent kind of bug. To describe it, if you "import" something in web worker, some bug like this still happens. I'll submit another issue after making reproduction on stackblitz.

[subframe7536]

same issue in v4.3.1.

work fine when rollback to v4.2.1

issue: #12970

[patak-dev]

Please create a new issue with a reproduction

[schickling]

And please link the new issue here. I was facing the same original issue and I'm holding back on upgrading to Vite 4.3 until this situation is resolved.