javascript – How to load a wasm file from an NPM package into a React app lazily with Webpack?


I am actually using Next.js, but it uses React and webpack under the hood. I would like to convert this wasm imagemagick demo to work in React/webpack/Next.js. How do I do that?

The pieces that I’ve seen so far is I would probably just need to fetch the wasm module so I can get the ArrayBuffer. But I don’t know how to get the path from the installed node_modules folder. Or alternative to that, perhaps I could use some webpack plugin (similar to this) to generate an output.wasm file locally in the public folder, and then fetch that with an XMLHttpRequest. Or finally, perhaps there just is a way to use a webpack loader to just do await import('@imagemagick/magick-wasm/dist/magick.wasm') to lazy load it! Something along those lines is what I think should be done, but I don’t know which path will lead to success.

Any ideas how to load a wasm module through a webpack system or in Next.js, so it works in the browser?

enter image description here

enter image description here



Source link

Leave a Comment