Add flag to remove new URL(url, import.meta.url)

[doomnoodles]

#15 says that vite now supports new URL(url, import.meta.url), but that is not entirely correct.

If a flag were added that would remove that line from the generated .js file's init function, then it would be possible to create Sveltekit+Rust projects that work automatically in SSR mode without manually deleting that line. Link to PoC project.

The lines that are commented out should be deleted when the flag is enabled:

If those lines are not deleted and one tries to run the PoC project in SSR mode then this happens:

[lencx]

Thanks for the suggestion，and it will be supported by adding loadType in the next version. #22 (comment)

[lencx]

new URL(url, import.meta.url) is not supported in SSR, the problem is not from the plugin, the plugin can try to support ssr in the future instead of fixing the problem by removing the code.

I want the code calls to be simple and clear.

[repo]
|- [my-wasm] # rust crate
|- [src] # `react`, `vue` or `svelte`
|- ...

react

// vite.config.ts
import reactRefresh from '@vitejs/plugin-react-refresh';
import { defineConfig } from 'vite';
import ViteRsw from 'vite-plugin-rsw';

export default defineConfig({
  plugins: [
    reactRefresh(),
    ViteRsw({
+     ssr: true, // TODO
      crates: [
        'my-wasm',
      ]
    }),
  ],
})

import React, { useEffect, useState } from 'react'
import init, { greet } from 'my-wasm'

function App() {
  useEffect(() => {
    // init wasm
    init()
  }, [])

  return (
    <div className="App">
      <button onClick={() => greet('wasm')}>
        hello wasm
      </button>
    </div>
  )
}

export default App

vue

// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import ViteRsw from 'vite-plugin-rsw';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    ViteRsw({
+     ssr: true, // TODO
      crates: [
        'my-wasm',
      ]
    }),
  ]
})

<template>
  <button @click="greet('webAssembly')">hello wasm</button>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import init, { greet } from 'my-wasm';

export default defineComponent({
  name: 'HelloWasm',
  setup: () => {
    // init wasm
    init();
    return { greet };
  }
});
</script>

svelte

// svelte.config.js
import { ViteRsw } from 'vite-plugin-rsw';

const config = {
  // ...
  kit: {
    target: '#svelte',
    ssr: true,
    vite: {
      plugins: [
        ViteRsw({
+         ssr: true, // TODO
          crates: ['my-wasm']
        })
      ]
    }
  }
};

export default config;

<script lang="ts">
  import { onMount } from 'svelte';
  import init, { greet } from 'my-wasm';
  onMount(() => {
    // init wasm
    init();
  })
</script>

<button on:click={() => greet('wasm')}>hello wasm</button>

[doomnoodles]

I'll open an issue in vite repository about this issue.

The Svelte code you have provided does not render the WASM on server side because onMount is only executed on client side, and using wasm functions without init first just doesn't work.

Init function should be awaited at the top scope for it to really be useful, which is not currently possible in svelte components. The current workaround would be to use the load function of a sveltekit page, which is called even on server side, and pass down the wasm module to the svelte component. Svelte issue #5501

[doomnoodles]

This is an issue that should be fixed by vite so i am closing the issue here.
When I need to deploy the files, I'll just remove the line manually for now with a script

[doomnoodles]

Temporary fix for prod build(npm run dev works fine)

package.json

...
"scripts": {
    "build": "node fix-new-urls && svelte-kit build",
}
...

fix-new-urls.js

import { readFileSync, writeFileSync } from 'fs';

const re = /[^\n]*new URL[^\n]*/g;
for(let crateName of JSON.parse(readFileSync("./.rsw.json", "utf8")).crates) {
    try {
        const fileName = "./src/lib/" + crateName + "/pkg/" + crateName + ".js";
        writeFileSync(fileName, readFileSync(fileName, "utf8").replace(re, ""));
    } catch {}
}

[Septias]

Doesn't work for me because SyntaxError: Cannot use import statement outside a module

[doomnoodles]

Doesn't work for me because SyntaxError: Cannot use import statement outside a module

Either make your package a module by adding "type": "module" in your package.json or use require statements instead of imports
https://nodejs.org/api/packages.html#type

[Septias]

Ty I'll try that later or tomorrow

[Septias]

A little late, but here I am. The shown solution with just deleting the new Url(...) didn't work for me (the page I use wa on doesn't load and it complains that wasm Init functions doesn't not get right input) so it seems the path is actually needed. Any ideas how to fix it?