new Worker() doesn't work with Nextjs version 12.0.8

[247software-harshal-ringe]

Run next info (available from version 12.0.8 and up)

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Home Single Language
Binaries:
  Node: 16.13.1
  npm: 8.3.0
  Yarn: N/A
  pnpm: N/A
Relevant packages:
  next: 12.0.8
  react: 17.0.2
  react-dom: 17.0.2

What version of Next.js are you using?

12.0.8

What version of Node.js are you using?

16.13.1

What browser are you using?

Chrome Version 97.0.4692.71 (Official Build) (64-bit)

What operating system are you using?

Windows 10

How are you deploying your application?

Other

Describe the Bug

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

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

How can I import packages which have new Worker syntax in them, Do I have to make any changes in next.config.js

Expected Behavior

I should be able to import packages.

To Reproduce

Run this code with Nextjs

https://codesandbox.io/s/wasm-imagemagick-basic-demo-y00u2

[balazsorban44]

You might have opened this in the wrong repo or the reproduction is not complete, I see a Create React App codebase. Could you please add a proper reproduction? 🙏

[247software-harshal-ringe]

Hi @balazsorban44 ,

I have created a sample repo using npx create-next-app@latest command to reproduce the bug. Please clone the code from https://github.com/harshal247software/nextjsworkerissue.git & run the npm i & then npm run dev

It will give the error error - ReferenceError: Worker is not defined

I have taken the sample code given by wasm-imagemagick. You can check their working example here https://codesandbox.io/s/wasm-imagemagick-basic-demo-y00u2. It is working fine with React but not with NextJS

[balazsorban44]

So there seem to be a few issues. Since Worker is not an API in Node.js, the SSR pass won't work in Next.js. You have to make sure that the code is only invoked in the browser.

From their docs, it seems that this is not something wasm-imagemagick wants to support anyway (only focused on browser), so what you could do is to dynamically import the package in doMagick like so:

const Magick = await import("wasm-imagemagick")

This way it only gets imported when being used (in the browser).

This brings up a different error though:

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

Which I'm not entirely sure about, but in their README there is this section with an IMPORTANT note to copy some files from node_modules. This sounds fragile and probably indicates some non-standard setup/hack.

I also found a more up-to-date package that seems to have the same purpose, you could test that one out: https://github.com/dlemstra/magick-wasm

For reference, Worker is supported in Next.js, when used correctly. See the following example: with-web-worker

So the issue is specific to wasm-imagemagick

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.