'How to import a web assembly code in html

I am learning the fundamentals of web assembly using rust and I am following this tutorial. It worked fine for all the things except when importing the web assembly javascript code where it gives this error,

Loading failed for the module with source “http://localhost:8000/pkg/hello_wasm.js”.

I tried disabling all the third party extensions and retried it but I am getting the same error.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Hello Wasm!</title>
    <script type="module">
      import init, { add } from './pkg/hello_wasm.js'

      await init() // this loads and instantiates our WASM module
      console.log(add(1, 2)) // this calls our compiled Rust function!
    </script>
  </head>
  <body></body>
</html>


 └── App/
    ├── pkg/
    │   ├── hello_wasm_bg.wasm
    │   ├── hello_wasm.js
    │   ├── some _ other _ files
    │   └── index.html
    └── src/
        └── lib.rs

javascript webassembly

Solution 1:^[1]

You have index.html in your pkg folder, so when you import the js file as ./pkg/... it will look for a folder called pkg inside of pkg. Move index.html up a directory (and restart the server from the App folder), or change the import to ./hello_wasm.js for this to work properly.

 ??? App/
    ??? index.html
    ??? pkg/
    ?   ??? hello_wasm_bg.wasm
    ?   ??? hello_wasm.js
    ?   ??? some _ other _ files
    ??? src/
        ??? lib.rs

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1

'How to import a web assembly code in html

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]