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'.

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?

[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.

[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