Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

memory import undefined #2200

Open
jregistr opened this issue Jun 12, 2020 · 22 comments
Open

memory import undefined #2200

jregistr opened this issue Jun 12, 2020 · 22 comments
Labels

Comments

@jregistr
Copy link

I've been going through the rust wasm book and I've gotten stuck on a problem.

Summary

I'm have an issue where memory

import {memory} from "wasm-rust/index_bg";

is undefined when I import it. So when I try to access buffer, it ofc errors out. Are there any known situations that would cause this?

Additional Details

I'm using the Webpack Wasm-pack plugin.
The project is can be found here: https://github.com/jregistr/wasm-game-of-life

@alexcrichton
Copy link
Contributor

I believe you'll need to import index_bg.wasm since index_bg.js also exists, but that should do the trick!

@noloerino
Copy link

I'm running into a similar issue in a project, and importing *_bg.wasm does indeed do the trick in vanilla JS. I'd like to have my project in Typescript though, and when I try to import with the .wasm extension (import { memory } from "duna_frontend/duna_frontend_bg.wasm"), it complains about being unable to find the module or its type definitions - if I try to import without the .wasm extension (import { memory } from "duna_frontend/duna_frontend_bg"), then webpack builds but warns that "export 'memory' was not found in 'duna_frontend/duna_frontend_bg'. I'm having trouble determining where on my toolchain the issue is coming from (webpack? yarn? typescript? wasm-pack? Cargo config?), so I'm wondering if anyone has any insight into this.

For what it's worth, my code can be found here: https://github.com/noloerino/duna/tree/reg-display/duna_frontend (JS stuff is in www/).

@alexcrichton
Copy link
Contributor

I think that may be a bug in our configuration right now in that case. We're generating foo_bg.js and foo_bg.wasm, but we're also generating foo_bg.d.ts which I think corresponds to just the foo_bg.wasm file. We'll probably need to rename something to get everything working in concert.

@jregistr
Copy link
Author

jregistr commented Jun 15, 2020

FWIW: I noticed I couldn't import the .wasm file in TS so I changed to a javascript file and memory is still undefined.
I actually get a warning

"export 'memory' was not found in 'wasm-rust/index_bg'

I also tried using wasm-pack over the webpack plugin version and still same issue. Something else must be off with my configuration....

@henriiik
Copy link
Contributor

Hello!

We are running into this as well. We have found a workaround that works for us, change the import like @alexcrichton said:

I believe you'll need to import index_bg.wasm since index_bg.js also exists, but that should do the trick!

But if we only do that typescript will complain that it does not find the module, we fix that by renaming the index_bg.d.ts file to index_bg.wasm.d.ts.

I am interested in contributing a fix to this issue if it would be merged. 🙂

@alexcrichton
Copy link
Contributor

I'd be totally down for merging a fix for this! I didn't realize that index_bg.wasm.d.ts would work, but in that case this should be a relatively easy fix!

@henriiik
Copy link
Contributor

it's works with our particular setup, i am not 100% sure it is a fix for all environments. Another option would be to rename index_bg.js to something else, index_fg.js perhaps? :)

@alxkhr
Copy link
Contributor

alxkhr commented Aug 8, 2020

Hi there!

You could also pass the memory through the js wrapper:

export { memory } from './index_bg.wasm';

It comes down to your intentions - what should a package consumer use? the js wrapper or the wasm file itself? Or both? ...then you might want to have definitions for both files (index_bg.d.ts and index_bg.wasm.d.ts).

I am also very interested in accessing the memory in a typescript setup! :)


Edit:
I just realized that the index.js is re-exporting everything in index_bg.js, so index_bg.js is likely not meant to provide another interface. It all comes down to the naming issue, which is already mentioned and having a definition file named index_bg.wasm.d.ts will do the trick. (It also ensures that you can't import index_bg.js in a strict typescript setup.)

@picode7
Copy link

picode7 commented Jan 16, 2021

I had the same issue, but the inital example I followed used wasm-bindgen = "0.2.63", so the fix was not there.
Updated it to the most recent version .69 and it now works.

@donmccurdy
Copy link

I'm running into a similar (possibly related?) issue, reported at rustwasm/wasm-pack#1030.

@olijaun
Copy link

olijaun commented Nov 4, 2021

I had the same issue. It's quite annoying when you're making your first steps with Rust and wasm. I followed everything in the tutorial and it just doesn't work. In my case I fixed it liked this (adding .wasm to wasm_game_of_life_bg):

import { memory } from "wasm-game-of-life/wasm_game_of_life_bg.wasm";

@Vinorcola
Copy link

Same for me here. The tutorial needs to be corrected.

@widcardw
Copy link

I'm using vite to start the project and the same problem arose😔

I am using the plugin vite-plugin-rsw. In the file main.ts, I can import the wasm file, and it provides code hinting. However, when I start it with pnpm run dev, the DOM raises error.

@widcardw
Copy link

I'm using vite to start the project and the same problem arose😔

I am using the plugin vite-plugin-rsw. In the file main.ts, I can import the wasm file, and it provides code hinting. However, when I start it with pnpm run dev, the DOM raises error.

I solved the problem by reading the source code of rwasm, I should use memory like this:

import init from 'wasm-game-of-life'
const wasmInit = await init()
const memory = wasmInit.memory
// ...

boweiliu added a commit to boweiliu/wasm-game-of-life that referenced this issue Aug 16, 2022
@boweiliu
Copy link

Hi, just surfacing, i'm still seeing this issue following the rust wasm tutorial: https://rustwasm.github.io/docs/book/game-of-life/implementing.html

@Liamolucko
Copy link
Collaborator

rustwasm/wasm_game_of_life#53 (plus rustwasm/book#223) is an alternate solution, which avoids needing the module's raw memory in the first place. @alexcrichton do you have access to those repos to take a look?

@alexcrichton
Copy link
Contributor

I can add others to those repos but I unfortunately don't have time to maintain them myself. @Liamolucko would you like me to add you to those?

@Liamolucko
Copy link
Collaborator

@Liamolucko would you like me to add you to those?

Yes.

@luanbt21
Copy link

package.json generated by wasm-pack is missing filename.wasm.d.ts in the files section.
You can add it by yourshelf before (p)npm install OR copy filename.wasm.d.ts into your node_modules and restart TS server.

Besides: I use vite and vite-plugin-wasm and i need build and preview, instead of dev server to get correct working.

@TakumaKira
Copy link

TakumaKira commented Apr 29, 2024

I ran into the same issue, and none of the workarounds above didn't work for my case.

JIC, someone like me needs another solution; I share mine here.

Basically, I gave up using objects exported by the generated package and set it up myself by following the definition.

import buildWasmModule from "wasm-game-of-life/wasm_game_of_life_bg.wasm";
import * as bg from "wasm-game-of-life/wasm_game_of_life_bg.js";

...

  buildWasmModule({'./wasm_game_of_life_bg.js': bg}).then(wasmModule => {
    bg.__wbg_set_wasm(wasmModule) // This was originally done before being exported in the package.
    main(bg.Universe, bg.Cell, wasmModule.memory, canvas) // Finally I could use the objects along with the target([WebAssembly.Memory](https://developer.mozilla.org/en-US/docs/WebAssembly/JavaScript_interface/Memory)).
  })

The original commit in my project is here.
(The original code imported like from "../node_modules/wasm-game-of-life/wasm_game_of_life_bg.wasm"; but this is just because my environment did not allow import like from "wasm-game-of-life/wasm_game_of_life_bg.js" until I configured my bundler(esbuild). So please never mind here.)

Then, I wanted to convert it into TypeScript. The usage code didn't need any changes but I needed to define the type of the wasm module myself to resolve type errors.

type BGModule = {}
type WASMModule = { memory: WebAssembly.Memory }

declare module 'wasm-game-of-life/wasm_game_of_life_bg.wasm' {
  export default function buildWasmModule(importObject: { './wasm_game_of_life_bg.js': BGModule }): Promise<WASMModule>
}

The original commit in my project is here and here.

I hope this will help someone.

@guillaume-gomez
Copy link

package.json generated by wasm-pack is missing filename.wasm.d.ts in the files section. You can add it by yourshelf before (p)npm install OR copy filename.wasm.d.ts into your node_modules and restart TS server.

Besides: I use vite and vite-plugin-wasm and i need build and preview, instead of dev server to get correct working.

I needed to add type="module" in the include boostrap.js in index.html (I had a warning after yarn build)

      <script src="./bootstrap.js" type="module"></script>

I tried again yarn build so it creates a new file .warn.
Finally yarn preview works

@PriyavKaneria
Copy link

I was facing same issue with my own project, this is what worked for me
Instead of using the wasm and it's generated types, use the wasm object returned from init function like so

...
let wasm;
...

// your code
// the code uses memory by `wasm.memory`

...
wasm = await init(); // do this wherever you initialize

Hope this helps!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests