Cannot get it to work with build

[maccesch]

It runs perfectly on dev but after I build my project I always get the error in the browser:

TypeError: Failed to construct 'URL': Invalid URL

Tracking it back to the generated .js file where the init() method relies on import.meta.url to construct the url of the wasm file. But that doesn't seem to be available after building.

Interestingly I get the exact same issue when I build your Vue 3 example.

Is there something I'm missing?

[lencx]

Hello, the vue3 sample code dependency has not been upgraded. Please make sure that the vite-plugin-rsw version is the latest and try again.

The rsw plugin will rewrite the internal code of pkg when it is built.
https://github.com/lencx/vite-plugin-rsw/blob/main/src/index.ts#L54

The steps to use the rsw plugin, take yarn as an example:

1. yarn dev (generate pkg)
2. yarn build (executed at least once step 1,use pkg to build)

[kabouzeid]

This is still happening for me

"vite": "^2.1.5",
"vite-plugin-rsw": "^1.2.7"

[kabouzeid]

It does work when the crate is in the same path as the vite project. It doesn't work when the crate is outside of the project, eg crates: ["../../my-crate"]

[lencx]

@kabouzeid

• crates: package name, support npm organization(not a directory path).
• the rust crate all start with the project root path.

Can refer to my other project: https://github.com/lencx/learn-wasm
Chinese articles: WebAssembly入门

[kabouzeid]

Why doesn't it work with directory paths?

[lencx]

The path that meets the agreement will be automatically matched inside the plug-in, that is, the package name in the crate is equivalent to the folder name under the root path.

[audacioustux]

any way to set crate root to crates/ instead of Vite project root or @npm-org/?

[lencx]

@audacioustux
Can such a directory structure meet your requirements?

[my-wasm-app]
|- [crate] # rust - custom path, starting from the project root path, or outside of `my-wasm-app`
|	  |-[rsw-test] # npm package
|	  |-[@rsw] # npm org
|	  	  |-[hey] # npm package
|	  	  |-[other] # npm package
|	  	  `-... # other package
|-[src] # front-end
|- vite.config.ts
`...

// vite.config.ts
import { defineConfig } from "vite";
import ViteRsw from "vite-plugin-rsw";
+ import path from 'path';

export default defineConfig({
  plugins: [
    ViteRsw({
+	  root: path.resolve('crate'), // TODO: rust - custom path
      mode: "release",
      crates: ["@rsw/hey", "@rsw/other", "rsw-test"],
    }),
  ],
});

[audacioustux]

@lencx exactly... I've tried with root: "crates" but that didn't work

[lencx]

@audacioustux
This has not yet been achieved, can be included in the plan, please stay tuned to the project.

[maccesch]

Thanks for the fast response! I think in our case it was because we had the crate named "rust". We had in a subfolder with that name before when we used Webpack to build everything and there it didn't give any errors but here it seems to be different. It works now. Thanks!

[lencx]

@audacioustux
Please install version v1.3.1, rust crates supports custom paths, you can use relative or absolute paths.

#3 (comment)

[audacioustux]

@lencx waiting for the CI/CD + cargo workspace support :(

[kabouzeid]

Awesome, thanks for addressing this! Although I don't need it myself, I think it makes more sense to have the root on a per crate basis. For example:

export default defineConfig({
  plugins: [
    ViteRsw({
      mode: "release",
      crates: [
        { root: 'path_1', name: '@rsw/hey' },
        { root: 'path_2', name: '@rsw/other' },
        { root: path.resolve("."), name: 'rsw-test' },
      ],
    }),
  ],
});

[kabouzeid]

@audacioustux could you elaborate what you mean exactly? :) I might be able to help. Also, if this is something completely different, it would be best to open a new issue for this.

[audacioustux]

@kabouzeid #5

[kabouzeid]

Ah yes, this is bugging me too 😅