Import WASM as Installed Package Failing

[bronze mountain]

I have built a WASM module and gotten it to work within an initial Next.js app. I built it with wasm-pack build --target web. So far, I've only been able to get it working within Next.js by copying the package files into a directory within my Next.js project. I can then import it by directly pointing to the folder within:

example:
const wasm = await import("@/wasm/my_module/my_module");

While, I am able to install the package by pointing npm to the package directory:

npm i ../my_module/pkg

I have not been able to import from the installed package.

const wasm = await import("my_module"); // This gives me a runtime error of "Module not found: Can't resolve 'my_module'"

I would like to be able to import my wasm from an installed NPM package.

[mental nebula]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[bronze mountain]

I feel I should mention, I'm rather comfortable with Rust, which is what I'm building my WASM module from. But I'm very new to JavaScript, React, etc.

[late fiber]

You wanna use the module that you built?

[bronze mountain]

yeah

[late fiber]

I see

In this case, you can't use npm i

You can put it in your public folder and try to import it.

[bronze mountain]

There was a method I found that had me put the files in a wasm folder in the root of the Next.js project and reference that with a string like "@/wasm/..."

That does work. I guess it just doesn't seem ideal.

[late fiber]

In this case, you need to define something into tsconfig.json.

[bronze mountain]

Oh ok, can you give me some details on what I would need to definite in there? Or can you point me to an example?

[late fiber]

"paths": {
"@/": ["./src/"]
}

[bronze mountain]

ok, i'm not really sure what this means. i assume you didn't want me to just add that as it is into tsconfig.json. i tried that and it only seemed to produce more errors.

when I've researched this online, i get the impression that there is a bit of a transition going on. i think once next.js was switch from webpack to turbopack, wasm became not as well supported.

i'm wondering what the current best practice is