ReferenceError: Worker is not defined & SecurityError: Failed to construct 'Worker': Script at 'webpack-internal:///./node_modules/wasm-imagemagick/dist/src/magick.js' cannot be accessed from origin 'http://localhost:3000'.

[247software-harshal-ringe]

Next.js gives the below error while importing the wasm-imagemagick package ReferenceError: Worker is not defined on the following line when I import that package in my component using import { execute} from 'wasm-imagemagick'

if (currentJavascriptURL.startsWith('http')) { 
    magickWorker = new Worker(window.URL.createObjectURL(new Blob([GenerateMagickWorkerText(magickWorkerUrl)]))); 
} else { 
    magickWorker = new Worker(magickWorkerUrl); 
}

I also tried to dynamically import the package on component load like below

useEffect(async () => {
    const Magick = await import("wasm-imagemagick");
}, [])

but then it gave me the below error

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

You can check the error by cloning this repo https://github.com/harshal247software/nextjsworkerissue.git. Just clone & run npm i & then npm run dev. I have taken the sample code from https://codesandbox.io/s/wasm-imagemagick-basic-demo-y00u2

I have also raised this bug to Next.js, Please check this conversation: https://github.com/vercel/next.js/issues/33217#issuecomment-1016513258

What should I do to make this package work with Next.js?

[mix0000]

I have similar issue: Failed to construct 'Worker': Script at 'webpack://l-video-editor/./node_modules/wasm-imagemagick/dist/src/magick.js' cannot be accessed from origin 'http://localhost:9000'.

Idk how but they get wrong URL for magick.js it can be access from http://localhost:9000/magick.js, but they taking it from webpack://l-video-editor/./node_modules/wasm-imagemagick/dist/src/magick.js

[blipk]

This isn't a problem with this repo, it's a problem with how you're using it. Webpack is awful at bundling WASM, look at some of the other issues, you will likely need to bypass the bundler and include it directly. Also you will need to use https.

[247software-harshal-ringe]

This isn't a problem with this repo, it's a problem with how you're using it. Webpack is awful at bundling WASM, look at some of the other issues, you will likely need to bypass the bundler and include it directly. Also you will need to use https.

I have written some WASM of my own using tinygo & I'm able to use it without any error & without using https. The only thing is that I'm not using any worker for that. So I think the issue is with the way the worker script is imported in WASM-ImageMagick

[mix0000]

This isn't a problem with this repo, it's a problem with how you're using it.

As I sad magick.js and magick.wasm available in / directory. I'm using ffmpeg and mediainfo, both of them working correct with webpack.

[blipk]

There's another issue open with the exact same error, and they report that it works if including it directly.

The issue is with webpack, or your configuration.

Anyway, not my repository, just trying to help.

[rondo10]

Any progress with that?

[DiriectorDoc]

This isn't a problem with this repo, it's a problem with how you're using it.

Worker is only partially supported by Node. Maybe it's not such a good idea to publish this as an npm package if it isn't compatible with most projects.

[ivanseidel]

This should work:

// Expose Worker threads to globals
import { Worker } from "worker_threads";

// Expose Worker globally
declare const globalThis: any;
class NWorker extends Worker {
  constructor(path: string, options?: any) {
    super(
      path.replace("/wasm-imagemagick/src/", "/wasm-imagemagick/dist/"),
      options
    );
  }
}
globalThis.Worker = NWorker;

export async function RunCommand(url: string) {
  const ImageMagick = await import("wasm-imagemagick");
  const res = await ImageMagick.call(
    [await ImageMagick.buildInputFile(url, "icon")],
    ["identify", "-verbose", "icon"]
  );
  return res;
}