How to import the module using Webpack?

[ludvigeriksson]

How do I import the module for use with a webpack dev server? Where do I put the magick.wasm and magick.js files? I'm using preact and start the dev server with preact watch. Can I edit webpack.config.js to include the files somehow?

edit: I've tried using copy-webpack-plugin, which seems to work if I build the project, but in the development server I get errors:

Uncaught (in promise) DOMException: Failed to register a ServiceWorker for scope ('https://localhost:8080/') with script ('https://localhost:8080/sw-debug.js'): An unknown error occurred when fetching the script.

DOMException: Failed to construct 'Worker': Script at 'webpack-internal:///../node_modules/wasm-imagemagick/dist/src/magick.js' cannot be accessed from origin 'https://localhost:8080'.

Uncaught (in promise) DOMException: Failed to construct 'Worker': Script at 'webpack-internal:///../node_modules/wasm-imagemagick/dist/src/magick.js' cannot be accessed from origin 'https://localhost:8080'.

[Hillsie]

The errors you're getting is probably a result of 8080 aka used for http. Try run it with https on 3001 et al. Additionally, Service Workers requires https
https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers

[snigle]

I have the same issue with fresh created vue3 application on webpack. Did you find a solution @ludvigeriksson ?

[ludvigeriksson]

Unfortunately not

[Fanna1119]

Unfortunately not

I am also stuck on this using vite with vue

when using

import { execute} from 'wasm-imagemagick'

Internal server error: Failed to resolve entry for package "wasm-imagemagick". The package may have incorrect main/module/exports specified in its package.json: Failed to resolve entry for package "wasm-imagemagick". The package may have incorrect main/module/exports specified in its package.json.

when using

import * as Magick from 'wasm-imagemagick/dist/magickApi'

Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://localhost:3000/node_modules/.vite/magick.js' failed to load.

I did paste the wasm files in the public directory, but of course I am not sure if it actually gets served(probably not)
Generally my experience with wasm has been quite a bumpy road.

[orteth01]

i have gotten this to work by including this script directly in my html

<script type="module">
  import * as Magick from 'https://knicknic.github.io/wasm-imagemagick/magickApi.js';
  window.magick = Magick;
</script>

as you can see, it imports the lib from a remote source and then puts it on the window object.
I still include the wasm files in the public directory.
I still include the node module in my dependencies so that I can grab the typescript types and use them to extend window.

it's not ideal, but i also was not successful in any of my attempts to just use the npm module.

hope this helps!

[fz6m]

I tried to modify the bundled output .js file, use a hack way of loading the Web worker in webpack.

image-magick

Unfortunately it takes a little longer to load the .js file (5 MB) for the first time in the page 😣

hope this helps