Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
aeroxy opened this issue May 15, 2020 · 3 comments
Closed

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

aeroxy opened this issue May 15, 2020 · 3 comments

Comments

@aeroxy
Copy link

aeroxy commented May 15, 2020

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
  }, []);
...
@aeroxy
Copy link
Author

aeroxy commented May 17, 2020

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.

@developit
Copy link
Owner

I believe this is a duplicate of #85?

@aeroxy
Copy link
Author

aeroxy commented May 18, 2020

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

@aeroxy aeroxy closed this as completed May 18, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants