0

Before starting, Sorry for my poor english..

I have encountered some problems using javascript that contains web assembly module load.

I created mobile keypad based on rust, and builded it wasm-pack.

This is my Web-pack build option.

module.exports = {
    entry: "./src/index.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "result.js",
        webassemblyModuleFilename: "MyModule.wasm",
        library: 'MyModule',
        libraryTarget: 'umd',
        libraryExport: ['default'],
        globalObject: 'this',
        umdNamedDefine: true,
    },
...
}

my index.js

import KeyPad from "./keypad";

export  default KeyPad;
export {
    KeyPad
};

global.KEYPAD = KeyPad;

my keypad.js

import * as core from '../pkg/~';
import '../css/style.css';
export default class KeyPad {
    some methods...
}

After build, I could get wasm files and build it again with command "npm run build" to get javascript file contains wasm.

After all of previous procedure, I created html file using the result javascript file, and called function.

 <script src="./dist/result.js"></script>
 <script type="application/javascript">
    $(() => {
      console.log("globalVar = " + window.MyModule);
      let myModule = new MyModule({});
      myModule.showKey();
    })
  </script>

But I encountered Undefined error, however I refreshed the web site then I can get correct result.

Uncaught ReferenceError: MyModule is not defined
    at HTMLDocument.<anonymous> ((색인):14:21)
    at e (jquery.min.js:2:30038)
    at t (jquery.min.js:2:30340)
(

After refresh, works well!

globalVar = class B{}

To solve this problem, I analyzed result javascript file, then I found syntax fetch('${MyModule.wasm}).

It seems to be a problem caused by loading wasm asynchronously in result javascript.

So the javascript file is loaded, but wasm is not fully loaded in javascript. As a result, Undefined Error but refreshing the web site -> fully loaded wasm file -> get works normally

I want to solve undefined error. How can i solve this problem??

Sorry again for my Poor English..

MJ1996
  • 31
  • 2

1 Answers1

0

Can you post the entire code? The solution here seems to be to wait for the resource to load, and this is usually done in html by adding the defer keyword to the <script> tag. Something like:

 <script src="./dist/result.js"></script>
 <script defer type="application/javascript">
    $(() => {
      console.log("globalVar = " + window.MyModule);
      let myModule = new MyModule({});
      myModule.showKey();
    })
  </script>

Anyway, here is a stackoverflow question with multiple suggestions for this problem.

TachyonicBytes
  • 700
  • 1
  • 8