WASM+SvelteKit: TypeError: Failed to construct 'URL': Invalid URL on client after successful build

[stanf0rd]

Describe the bug

Hi! I am trying to setup SvelteKit with WASM (compiled using rollup-plugin-assemblyscript). My wasm-module loads on client using onMount hook:

onMount(async () => {
  const wasmUrl = await import("asc:@/core/add.as");
  WebAssembly.instantiateStreaming(fetch(wasmUrl)).then(({ instance }) =>
    console.log(instance.exports.add(40, 2))
  );
});

After successful build I receive such error on client:

TypeError: Failed to construct 'URL': Invalid URL
    at add-ff7f1bae.js:1

Inside generated add-*.js file:

const e = new URL("../assets/add-5e595341.wasm",{}.url).href;
export {e as default, e as wasmUrl};

Looks like missing import.meta.url, but I'm not sure.

Reproduction

You can reproduce described error here:
https://github.com/stanf0rd/rasseki-game/tree/wasm-setup

Just

npm install
npm run build
npm preview

and look into browser console on localhost:3000

Logs

Build logs:

> svelte-kit build

vite v2.5.10 building for production...
✓ 18 modules transformed.
.svelte-kit/output/client/_app/assets/add-5e595341.wasm                    0.09 KiB
.svelte-kit/output/client/_app/manifest.json                               1.73 KiB
.svelte-kit/output/client/_app/pages/__layout.svelte-b6ef297e.js           0.54 KiB / brotli: 0.31 KiB
.svelte-kit/output/client/_app/pages/index.svelte-893d5051.js              1.64 KiB / brotli: 0.71 KiB
.svelte-kit/output/client/_app/error.svelte-641ac797.js                    1.56 KiB / brotli: 0.64 KiB
.svelte-kit/output/client/_app/chunks/add-ff7f1bae.js                      0.09 KiB / brotli: 0.09 KiB
.svelte-kit/output/client/_app/chunks/preload-helper-ec9aa979.js           0.50 KiB / brotli: 0.28 KiB
.svelte-kit/output/client/_app/assets/start-61d1577b.css                   0.16 KiB / brotli: 0.11 KiB
.svelte-kit/output/client/_app/assets/pages/__layout.svelte-dd72df29.css   0.16 KiB / brotli: 0.10 KiB
.svelte-kit/output/client/_app/assets/pages/index.svelte-1ecc56f5.css      0.96 KiB / brotli: 0.30 KiB
.svelte-kit/output/client/_app/chunks/vendor-af0f2ef7.js                   6.98 KiB / brotli: 2.60 KiB
.svelte-kit/output/client/_app/start-6f9adcce.js                           17.30 KiB / brotli: 5.51 KiB
vite v2.5.10 building SSR bundle for production...
✓ 18 modules transformed.
.svelte-kit/output/server/app.js   58.62 KiB

Run npm run preview to preview your production build locally.

> Using @sveltejs/adapter-node
  ✔ done


Client logs:

add-ff7f1bae.js:formatted:1 Uncaught (in promise) TypeError: Failed to construct 'URL': Invalid URL
    at add-ff7f1bae.js:formatted:1
(anonymous)	@	add-ff7f1bae.js:formatted:1
Promise.then (async)		
i	@	index.svelte-893d5051.js:1
(anonymous)	@	index.svelte-893d5051.js:1
E.e	@	index.svelte-893d5051.js:1
(anonymous)	@	index.svelte-893d5051.js:1
e	@	vendor-af0f2ef7.js:1
(anonymous)	@	vendor-af0f2ef7.js:1
W	@	vendor-af0f2ef7.js:1
rt	@	vendor-af0f2ef7.js:1
W	@	start-6f9adcce.js:1
_init	@	start-6f9adcce.js:1
start	@	start-6f9adcce.js:1
async function (async)		
start	@	start-6f9adcce.js:1
nt	@	start-6f9adcce.js:1
(anonymous)	@	(index):22

System Info

System:
    OS: macOS 11.6
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 2.26 GB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.9.1 - /usr/local/bin/node
    npm: 7.21.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 93.0.4577.82
    Safari: 15.0
  npmPackages:
    @sveltejs/adapter-node: ^1.0.0-next.46 => 1.0.0-next.49 
    @sveltejs/kit: next => 1.0.0-next.171 
    svelte: ^3.34.0 => 3.43.0

Severity

blocking all usage of SvelteKit

Additional Information

Looks similar with that case, but there was an error at build step with SSR feature.
#1896: Error "new URL(url, import.meta.url) is not supported in SSR." with ssr: false & adapter-static

[benmccann]

You should really file this in the Vite repo if you'd like it to be solved because this is quite unlikely to be an issue in SvelteKit itself. For more details, see https://github.com/sveltejs/kit/blob/master/README.md#bug-reporting

[stanf0rd]

@benmccann
Suddenly there is no reply for my issue in vite repo for two weeks, but!
Seems like I found the reason of an error.

Accoriding to that issue, Vite transforms import.meta.url to empty object, if set target was lower than es2020.
And if we look to Rollup sources here, we see that import.meta.url is used for resolving assets in es mode by default (for import.meta.ROLLUP_FILE_URL_${referenceId}):

es: relativePath => getResolveUrl(`'${relativePath}', import.meta.url`),

Current build.target is controlled by sveltekit and is es2018.
If I change kit.vite.build.target to es2020 I receive such error:

build_server: The value for kit.vite.build.target specified in svelte.config.js has been ignored. This option is controlled by SvelteKit.

So, now really weird crutch-fix is to fork rollup-plugin-assemblyscript and add resolveFileUrl hook for manual import resolve based on document.baseURI:

  resolveFileUrl({ 
    return `new URL('${fileName}', document.baseURI).href`;
  },

Could you recommend a better fix? Maybe there is a way to change kit's build.target?

[benmccann]

It's probably because we support Node 12, which doesn't support es2020 very well: https://node.green/#ES2020

However, we were about ready to drop Node 12 support, so I can bump the ES version at the same time

[benmccann]

@stanf0rd thanks for digging into this. Can you upgrade to 1.0.0-next.184 which sets the target to es2020 and see if it's solved for you now?

[benwis]

I can confirm that with the next target for @sveltejs/kit, import.meta.url is still blank