developit/workerize-loader

workerize-loader failed to work after compiling (react typescript)

aeroxy opened this issue · 3 comments

I created a rust-wasm module and use workerize-loader to load it:

export const getQRCode = async (
  arg: string,
  width: number,
  height: number
) => {
  const { qrcode } = await import('uranus-qrcode');
  return qrcode(arg, width, height);
};

and then I use the worker as such:

// @ts-ignore
// eslint-disable-next-line import/no-webpack-loader-syntax
import qrCodeWorker from 'workerize-loader!workers/qrCodeWorker';

...
  const workerizeQRLoader = async () => {
    try {
      const instance = qrCodeWorker();
      const qr = await instance.getQRCode(href, 150, 150);
      setQRCode({
        __html: qr
      });
    } catch (e) {
      console.warn(e);
    }
  };
...
  useEffect(() => {
    workerizeQRLoader();
    // qrLoader();
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
...

The above works in dev mode, but after compiling it says:

TypeError: a.getQRCode is not a function
    at 8.a2ac9b2e.chunk.js:1
    at l (0.69608c56.chunk.js:2)
    at Generator._invoke (0.69608c56.chunk.js:2)
    at Generator.forEach.e.<computed> [as next] (0.69608c56.chunk.js:2)
    at r (0.69608c56.chunk.js:2)
    at s (0.69608c56.chunk.js:2)
    at 0.69608c56.chunk.js:2
    at new Promise (<anonymous>)
    at 0.69608c56.chunk.js:2
    at 8.a2ac9b2e.chunk.js:1

If I import the rust-wasm module directly into the main thread it works:

...
  const qrLoader = async () => {
    const { qrcode: render } = await import('uranus-qrcode');
    const qr = await render(href, 150, 150);
    setQRCode({
      __html: qr
    });
  };
  useEffect(() => {
    // workerizeQRLoader();
    qrLoader();
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
...

I also created a starter project: https://github.com/aeroxy/react-typescript-webassembly-starter.git

You can checkout the "workerize" branch and see how it works in dev mode but after compiling, it throws "not a function" error.

I believe this is a duplicate of #85?

Yes apparently. I am updating my example now. Thanks for the fix!