wasm is undefined in photon_rs_bg.js

[RaphaelRoyerRivard]

I'm using TypeScript with WebPack and I'm trying to follow the guide (https://silvia-odwyer.github.io/photon/guide/using-photon-web/) but I can't seem to execute the open_image function with a canvas and 2d context. This is the error I get :

Uncaught (in promise) TypeError: _photon_rs_bg_wasm__WEBPACK_IMPORTED_MODULE_0__.open_image is not a function
    at Module.open_image (photon_rs_bg.js?f243:2007)

I have tried importing photon with

let photon = await import("@silvia-odwyer/photon");

and also with

import { filter, open_image, putImageData } from "@silvia-odwyer/photon";

But I get that error with both import methods. Here is the part where I use photon

let maskCanvas = document.createElement('canvas');
maskCanvas.width = outputResolution.width;
maskCanvas.height = outputResolution.height;
const maskContext = maskCanvas.getContext('2d');
const maskImage = await pixelFilters.dsToMask(modelOutput, outputResolution);
maskContext.putImageData(maskImage, 0, 0);
let photonImage = open_image(maskCanvas, maskContext);
filter(photonImage, "radio");
putImageData(maskCanvas, maskContext, photonImage);

What am I doing wrong?

[krpeacock]

I've encountered this too. It seems like a problem with how webpack 5 handles the wasm import

[babalolajnr]

I have this exact issue currently. How were you able to resolve it.

[phellmayr1]

I would appreciate any help/workaround for this issue too :)

[silvia-odwyer]

@phellmayr1 @babalolajnr There's a web version of Photon available, which is available on NPM here: https://www.npmjs.com/package/photon-web If you import that instead, it could solve the issue, although let me know if it still isn't working. The issue is mainly to do with the targets provided by wasm-bindgen, so you could try opening an issue there as well to get input from the wasm-bindgen team also ✅

[babalolajnr]

Thanks. I will try that.

[Sparkenstein]

I was facing the same issue, after switching to Photon-web I am getting:

The example I am using is react example given in repository iteself, except I changed import to photon-webs init.

[Sparkenstein]

I guess I was doing it wrong, importing just init is not enough you have to import each and every function from photon-web, can't use this.wasm.open_image the way it was mentioned in the given react example. after importing every function it looks like it's working.

putting a pastebin for others to use: https://pastebin.com/y3p42yLw

[bentron2000]

If this happens to help anyone:

I am using Next js and have a desire to run this in a web worker and the following is working nicely. (Nextjs is using Webpack 5)

So far I can do the following...

in next.config.js

module.exports = {
...
     webpack: config => {
            config.experiments = {
                  layers: true,
                  syncWebAssembly: true
    }
    ....
    return config
}

in my photon.worker.js

const loadWasm = async () => {
  return await import('@silvia-odwyer/photon')
}

const myCoolFunc() = async ( ) => {
    const Photon = await loadWasm()
   
    ...<do things with Photon>

}

[bluthen]

It works for me with webpack5 with asyncWebAssembly. I've never tried it with syncWebAssembly.