import.meta.url not available in dependencies, wasm-pack modules unusable in dev mode?

[pixelspark]

Describe the bug

I have built a package (@webonnx/wonnx-wasm) containing a WebAssembly module from Rust using wasm-pack. The source is here, command line used to build:

RUSTFLAGS=--cfg=web_sys_unstable_apis wasm-pack build --target web -d `pwd`/target/pkg --out-name wonnx --scope webonnx ./wonnx-wasm

I tried building a very simple app using Vite to test the package. Upon opening the app however, I get the following error:

Uncaught (in promise) TypeError: Failed to construct 'URL': Invalid URL
    at init (wonnx.js:422:17)
    at run (main.js:5:9)
    at main.js:32:1

The issue appears to be with this line in the part of the wonnx-wasm package that loads the WebAssembly module:

 input = new URL('wonnx_bg.wasm', import.meta.url);

Further digging revealed that import.meta.url is undefined here. It is defined when I try to log it from the app code. (So: Vite is likely not defining it for dependencies?).

Interestingly running npm run build makes it work just fine! (You will likely still see the error TypeError: Cannot read properties of undefined (reading 'requestAdapter') in your browser because the package attempts to use WebGPU, that's obviously not a problem in Vite). In the bundle the offending line compiles to:

_=new URL("/assets/wonnx_bg.d1675c64.wasm",self.location));

So my question is (1) is this behaving as expected, and (2) if so, how am I supposed to be using packages like this in dev mode (e.g. from wasm-pack) with Vite / is there anything wasm-pack should change?

Reproduction

https://github.com/pixelspark/wonnx-wasm-test

System Info

System:
    OS: macOS 12.2.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 25.01 GB / 64.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.14.0 - ~/.brew/bin/node
    npm: 8.3.1 - ~/.brew/bin/npm
  Browsers:
    Chrome Canary: 101.0.4939.0
    Edge: 99.0.1150.36
    Firefox: 97.0.2
    Firefox Nightly: 99.0a1
    Safari: 15.3
    Safari Technology Preview: 15.4

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 https://github.com/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.

[upupming]

I believe this is a bug of vite, it trys to transform the esm dep to esm 2019 using esbuild:

vite/packages/vite/src/node/build.ts

Lines 276 to 281 in c2ab324

	resolved.target = [
	'es2019',
	'edge88',
	'firefox78',
	'chrome87',
	'safari13.1'

vite/packages/vite/src/node/optimizer/index.ts

Line 431 in c2ab324

const result = await build({

esbuild will convert import.meta.url to import_meta.url, which will be undefined. You can see this example produced by esbuild.

[bluwy]

Is this the same as #5270?

[upupming]

@bluwy Yes, I confirm that set optimizeDeps.esbuildOptions.target to es2020 will fix this issue!

[upupming]

@bluwy esbuild will report an warning when build to target that does not support import.meta.url, you can see the debug example below and the esbuild repl

I think we should log this warning to user, or change this warning to our own warning to guide user to change their vite.config.ts file. What do you think?

[bluwy]

I think a warning is good for the interim, but I haven't took a deeper look of why this happens in the first place and whether it can be fixed within esbuild (or Vite), so we can fix it without any warnings in the first place. Feel free to hack a PR out if you want though, it makes sense to me that esbuild warnings after pre-bundling should be printed out (Not sure if that could get noisy 🤔)

I'll close this issue then in favour of #5270 so we can keep the discussion in one place. Thanks for looking into this!

[pixelspark]

Thanks all!

@bluwy Yes, I confirm that set optimizeDeps.esbuildOptions.target to es2020 will fix this issue!

Yes, this fixes the URL error. It introduces a new one however (wonnx_bg.wasm cannot be found at http://localhost:3000/node_modules/.vite/wonnx_bg.wasm). This is probably some other config setting (if anyone here can point me in the right direction, much appreciated!)

[pixelspark]

So apparently the package is 'optimized' and put in node_modules/.vite but the referenced WASM-file is not. It is still available however as node_modules/@webonnx/wonnx-wasm/wonnx_bg.wasm. I fixed the issue by just excluding the package in optimizeDeps:

import { defineConfig } from "vite";

export default defineConfig({
  optimizeDeps: {
    exclude: ["@webonnx/wonnx-wasm"],
    esbuildOptions: {
      target: "es2020",
    },
  },
});