question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

`new URL(foo, import.meta.url)` doesn't work when dependency was optimized

See original GitHub issue

Describe the bug

Now, i use wasm-pack for build WASM file and WASM with JavaScript glue layer like this

The glue layer code contains below code


if (typeof input === 'undefined') {
165 | input = new URL('color_thief_wasm_bg.wasm', import.meta.url);
166 | }

In Vite, after esbuild optimize third party, import.meta.url cannot be optimize succeed. Ref Vite Docs, even if set build.target to es2020 is still the problem

After preprocess

node_modules/color-thief-wasm-web/color_thief_wasm.js will be transform to node_modules/.vite/deps/color_thief_wasm.js which load .wasm file by import.meta.url receive incorrect path is node_modules/.vite/deps/xxx.wasm finally, the correct path is node_modules/color-thief-wasm-web/xxx.wasm

One of the solutions is set optimizeDeps.exclude to exclude third party module like this

Reproduction

https://stackblitz.com/edit/vite-rkrfzu?file=src%2FApp.vue,vite.config.js

System Info

vite@2.9.9

Used Package Manager

npm

Logs

Failed to construct 'URL': Invalid URL

Validations

Issue Analytics

  • State:open
  • Created a year ago
  • Reactions:2
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
zhangyuangcommented, Jun 8, 2022

An ugly practice is move wasm package to current project rather than node_modules for get correct path

0reactions
egorguschacommented, Jul 8, 2022

@yyx990803 @patak-dev When you plan to resolve the issue?

Read more comments on GitHub >

github_iconTop Results From Across the Web

import.meta - JavaScript - MDN Web Docs
meta meta -property exposes context-specific metadata to a JavaScript module. It contains information about the module, such as the module's URL.
Read more >
API - ESBuild
Bundling with esbuild only works with statically-defined imports (i.e. when ... doesn't support while bundling (such as __dirname , import.meta.url , fs.
Read more >
Building for Production - Vite
The exception is when you need to dynamically concatenate URLs on the fly. In this case, you can use the globally injected import.meta.env....
Read more >
Bundling non-JavaScript resources - web.dev
wasm') with fetch(new URL('./module.wasm', import.meta.url)) and it will successfully load the expected WebAssembly module, as well as give ...
Read more >
Migration - Parcel
For the most part, Parcel 2 works quite similarly to Parcel 1, but there are a few things ... const downloadUrl = new...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found