Error "new URL(url, import.meta.url) is not supported in SSR." with ssr: false & adapter-static
#1896
Comments
tontoko
changed the title
new URL(url, import.meta.url) is not supported in SSR. with ssr: false & adapter-staticnew URL(url, import.meta.url) is not supported in SSR.` with ssr: false & adapter-static
tontoko
changed the title
new URL(url, import.meta.url) is not supported in SSR.` with ssr: false & adapter-staticnew URL(url, import.meta.url) is not supported in SSR." with ssr: false & adapter-static
|
@tontoko I am just commenting on this issue because I wrestled with it for a few hours myself and came up with a work around. I don't believe this is an actual svelte-kit issue, I believe it can be traced all the way back to wasm-pack. The challenge is the way svelte-kit can compile a component for both SSR and CSR. In your /Users/Tomohiko/workspace/sveltekit-wasm/markdown_wasm/pkg/markdown_wasm.js file this line can't be transformed by the SSR compiler because it contains the URL javascript keyword as you can see above the client compiler completes just fine. I myself tried ever permutation to get the SSR compiler to ignore that line but then you can't use wasm in SSR :( so that isn't a solution. Anyway all that to say you have to remove line# 4066 or any line that contains new URL and then pass in the string url to the init function. The regex is used to parse the url during build and will return a string in dev. Also update the function to the path of your wasm.js file and .wasm files. Hope this helps. |
|
@NiQ-B Thanks for your comments! // for my wasm file: const {pulldown_cmark} = await wasm_boot('../../markdown_wasm/pkg/markdown_wasm')
export const wasm_boot = async (wasmPath: string) => {
const init = (await import(wasmPath + '.js')).default;
const fn = await import(wasmPath + '.js');
const initialized: WebAssembly.Module = await init(wasmPath + '_bg.wasm');
return { initialized, ...fn };
};When I ran /Users/Tomohiko/workspace/sveltekit-wasm/src/lib/wasm_boot.ts
1 | export const wasm_boot = async (wasmPath) => {
2 | const init = (await import(wasmPath + ".js")).default;
3 | const fn = await import(wasmPath + ".js");
| ^
4 | const initialized = await init(wasmPath + "_bg.wasm");
5 | return { initialized, ...fn };
The above dynamic import cannot be analyzed by vite.
See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations for supported dynamic import formats. If this is intended to be left as-is, you can use the /* @vite-ignore */ comment inside the import() call to suppress this warning.
Plugin: vite:import-analysis
File: /Users/Tomohiko/workspace/sveltekit-wasm/src/lib/wasm_boot.tsAs svelte.config.js import staticAdapter from '@sveltejs/adapter-static';
const config = {
kit: {
adapter: staticAdapter(),
...
}
}locate wasm files in or import nodeAdapter from '@sveltejs/adapter-node';
const config = {
kit: {
adapter: nodeAdapter(),
...
}
}locate wasm files in |
|
Made a proof of concept with ssr that works automtically sveltekit-rust-ssr-template |
|
Same error using "@wasm-tool/rollup-plugin-rust" with vite and svelte-kit |
|
I wrote simple base plugin for vite. It works well (it seems) with SSR and sveltekit (adapter-static) |
|
I would expect this is fixed now by passing |
|
Same error with ssr disabled.
export async function handle({ event, resolve }) {
const ssr = false;
const response = await resolve(event, { ssr });
return response;
} |
|
Thanks. Can you please provide a repository that reproduces this issue? I don't have a |
|
Thanks! Hmm. Even putting the code behind a Maybe the Svelte compiler could remove the code in For reference, here's where the error is triggered in Vite |
Rich said we it can't do this in the svelte compiler, because it would need to apply to custom lifecycle functions in .js modules |
|
A fix for this has been merged and will be included in Vite 2.9 |
|
fwiw here's my cursed hack for a project that has a module compiled with emscripten that was needed in an endpoint. You can also inline the entire thing with the
// encode.js
import fs from 'fs';
const f = fs.readFileSync('mt63Wasm.wasm');
fs.writeFileSync('mt63Wasm.txt', f.toString('base64'));node encode.js
// wasmBuf.ts
const wasmBuf = Buffer.from(...base64 contents here..., 'base64');
export wasmBuf;
// generatedWasm.js
...
return (
function(Module, binary) { // pass binary with Module
Module = Module || {};
...
function getBinaryPromise() {
return Promise.resolve().then(function() {
return binary;
})
}
// some-endpoint.ts
import { wasmBuf } from '$lib/wasm/wasmBuf.js';
import { Module } from '$lib/wasm/generatedWasm.js';
/** @type {import('@sveltejs/kit').RequestHandler} */
export async function get({ params }) {
const mod = await Module({}, wasmBuf);
// Tada |
Describe the bug
I'm trying to get sveltekit to work with wasm.
(Built with wasm-pack).
It works fine in the development environment, but I get an error only when building.
Looking at the error log, it appears that the js-script generated by wasm-pack is SSR-bundled, even though it is run only on the client side.
What I've tried:
ssr: falseinsvelte.config.js@sveltejs/adapter-staticand spa-modeonMountReproduction
/svelte.config.js
where wasm is called
init() (js-script which wasm-pack generated)
Logs
System Info
System: OS: macOS 11.4 CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz Memory: 7.12 GB / 64.00 GB Shell: 3.2.57 - /bin/sh Binaries: Node: 16.3.0 - ~/.nvm/versions/node/v16.3.0/bin/node npm: 7.15.1 - ~/.nvm/versions/node/v16.3.0/bin/npm Browsers: Chrome: 91.0.4472.114 Safari: 14.1.1 npmPackages: @sveltejs/adapter-static: ^1.0.0-next.13 => 1.0.0-next.13 @sveltejs/kit: next => 1.0.0-next.124 svelte: ^3.38.3 => 3.38.3Severity
annoyance
Additional Information
No response
The text was updated successfully, but these errors were encountered: