SyntaxError: import not found

[silvia-odwyer]

SyntaxError: import not found

[nshen]

HI @andilem @silvia-odwyer I made a vite build example, please check.

Demo:
http://github.nshen.net/photon-vite/

Code:
https://github.com/nshen/photon-vite

I just forked photon and republished a npm package with wasm-pack build --target web

https://www.npmjs.com/package/photon-web

with vite-plugin-wasm-pack , it works.

[behunin]

The problem comes from wasm-bindgen, the way it packages wasm causes all sorts of problems. Even when you do target web. I had to rework the whole package in order to get something working. Hopefully I will have some free time this winter to submit some PRs to wasm-bindgen.

[silvia-odwyer]

@nshen Thanks very much for this, it'll be incredibly useful for those who wish to use Photon with vite 😄 Your help is much appreciated, so thanks again! 🎉

[silvia-odwyer]

@behunin Hi Levi, could you show the code used and I'll take a look at it! Thanks 😄

[behunin]

    function resize() {
      
      const ctx = small.value.getContext("2d");
      ctx.drawImage(orig.value, 0, 0);
      
      try {
        import("@silvia-odwyer/photon")
          .then((photon) => {
            let img = photon.open_image(small.value, ctx);

            photon.resize(img, 50, 50, 1);
            photon.putImageData(small.value, ctx, img);
          })
          .catch((e) => {
            console.log(e);
          });
      } catch (e) {
        console.log(e);
      }
    }

This is inside a Vue 3 setup function.
small is a ref to the <canvas>
orig is a ref to the <img />

I get the same error whether I use references or getElementById()

Thank you for your time! 😃

[andilem]

I am getting the same (or a similar) error when using Vite (https://vitejs.dev) as build tool.

The problem seems to come from the fact that Vite uses the following WASM import mechanism: https://vitejs.dev/guide/features.html#webassembly. But in photon_rs_bg.js, the WASM import is defined as import * as wasm from './photon_rs_bg.wasm';, which doesn't work with Vite WASM import.

I found no easy solution, even copying the whole package in my repo and editing the import only led to a new error:

Uncaught (in promise) TypeError: WebAssembly.instantiate(): Import #0 module="./photon_rs_bg.js" error: module is not an object or function

Inspection of the .wasm showed that there are indeed imports from ./photon_rs_bg.js.

Being no JS/WASM expert, I have no idea how to solve this. Is it required to build the WASM with another type, like web (https://rustwasm.github.io/docs/wasm-bindgen/reference/deployment.html)?

@silvia-odwyer Could you tell us if you plan to support Vite or if you have any idea how to approach or work around this issue?

[silvia-odwyer]

@andilem Thanks for letting me know about this! I'd recommend opening an issue in the wasm-bindgen repository, as the WASM version of photon is built using it, so it's definitely worth letting them know also, and you'll be able to get it working with Vite in the future hopefully then 👍