How do I integrate node modules/npm packages into my Dioxus app? (wasm_bindgen)

[FredrikNoren]

I keep finding myself needing to bring in npm packages into my Dioxus app; is there a recommended way to handle that?

Specifically, what I want to do is:

1. npm install some_module
2. Then expose it in Rust using wasm_bindgen (but how? I've figured out how to do it with source maps, where I can point to a global url to a package, but not to something I'll bundle with my Dioxus app)

Would also be great if this was part of the guide!

[ealmloff]

If you are using dioxus web, the wasm-bindgen guide covers this: https://rustwasm.github.io/wasm-bindgen/examples/hello-world.html. Any scripts you bind to will be moved into the bundled dist directory automatically by dioxus

[FredrikNoren]

Hm do you have an example of that? What I've tried is: I have a Dioxus project, and then I have the node_modules in the root folder. Then I did:

#[wasm_bindgen(raw_module = "../node_modules/typescript/lib/typescript.js")]
    extern "C" {
        #[wasm_bindgen(js_namespace = ["ts"], catch)]
        pub fn transpile(code: &str) -> Result<String, JsValue>;
    }

But I don't see the javascript file copied to dist. And in the browser I get an error "Expected a JavaScript module script but the server responded with a MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec.", I'm assuming because it can't find the file.

(I tried model = .. and a bunch of variations on ./node_modules.. node_modules etc. but never found a way to get it to copy the module)

[FredrikNoren]

Here's a minimal repro: https://github.com/FredrikNoren/dioxus_ts_repro

[ealmloff]

Here is an example within the docsite: https://github.com/DioxusLabs/docsite/blob/bb8662f9af9c65d75358f288d25b97e9f57b4085/src/components/awesome/mod.rs#L296-L300
Which is copied to here: https://github.com/DioxusLabs/docsite/blob/gh-pages/assets/dioxus/snippets/dioxus_docs_site-3d7fa65fa73c445a/src/components/awesome/storage.js

It might be something specific to typescript if it isn't serving correctly for you?

[ealmloff]

I think your example doesn't work because you use raw_module instead of module. From the wasm_bindgen docs: it does not attempt to interpret paths starting with ./, ../, or / as JS snippets.

I think it is meant for assets that are already bundled or external assets and it will opt the snippet out of bundling

[FredrikNoren]

Ah ok, the correct format is module = "/node_modules/...". Got it to copy it now. Thank you!