Bug: 'Worker is not defined' with Pixi 7.4.0 and Node v18.17.1

[bhousel]

Current Behavior

We have a test suite using Node Test Runner and running with Node v18.17.1 and after installing the latest v7.4.0 Pixi release our tests are throwing a new error:

file:///Users/bryan/Projects/rapid/node_modules/@pixi/assets/lib/_virtual/checkImageBitmap.worker.mjs:20
class WorkerInstance extends Worker {
                             ^

ReferenceError: Worker is not defined
    at file:///Users/bryan/Projects/rapid/node_modules/@pixi/assets/lib/_virtual/checkImageBitmap.worker.mjs:20:30
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

I'm not sure whether we need to switch to a different build of Pixi for node. (I also might be able to work around the issue another way, since we aren't using the worker functionality here.)

Expected Behavior

No errors.

Steps to Reproduce

tbd

Environment

• pixi.js version: e.g. 7.4.0
• Browser & Version: e.g. Node v18.17.1

Possible Solution

No response

Additional Information

No response

[bigtimebuddy]

pixi.js does not run natively in Node.js, it's browser only. If you need to run in Node.js, you can use this project: https://github.com/pixijs/node

[bhousel]

Thanks @bigtimebuddy , and sorry for the noise..
I tracked it down to an unneeded import * as PIXI from 'pixi.js'; from some code that was expected to run headless.

[bigtimebuddy]

No worries!

[shipurjan]

I still have this problem in a Tauri app with NextJS (everything is configured to be client-side). Everything worked on pixi.js 7.3.3, but after updating to 7.4.0 it still works correctly, but I get an error

 node_modules\.pnpm\@pixi+assets@7.4.0_@pixi+core@7.4.0\node_modules\@pixi\assets\lib\_virtual\checkImageBitmap.worker.mjs (20:29) @ Worker
 ⨯ ReferenceError: Worker is not defined
    at __webpack_require__ (C:\Users\niar-windows\Documents\repos\bioparallel\.next\server\webpack-runtime.js:33:42)

Also the project can't be build, because Worker is not defined, and even though everything is configured to be on the client-side it still seems to check if everything functions on SSR or something

EDIT:
I lazy loaded the component using pixi.js with

const Dashboard = dynamic(
    () =>
        import("@/components/tabs/dashboard/dashboard").then(
            mod => mod.Dashboard
        ),
    { ssr: false }
);

And now it seems to work without errors. So it's not a pixi problem

[vincaslt]

I seem to be getting this exact issue on Electron, running on the Main (node) process, and I'm using the node package. Seems like some juggling around worker files might have introduced this issue? pixijs/node#15

Edit: my thinking is after the PR below the worker code is imported where before during the build now, where before it was encoded as string and loaded as-needed. The pixi/node seems to work by letting pixi load whatever extensions it needs and then unloading those that aren't compatible with node. Problem is that the code is not eliminated and the class is created up-front, not on-demand so the loader adds a class that tries to extend Worker class that doesn't exist in node, and the code is run, even though it would get unloaded later in the node package.

[bigtimebuddy]

PR that affected Workers is here #9399
@SuperSodaSea do you think you could you take a look at this?

[SuperSodaSea]

I apologize for not considering Node.JS environment in that PR! I'll fix this issue soon.

[notchris]

@SuperSodaSea Thank you!

[bigtimebuddy]

I wonder if we can keep the external worker.ts files (and all the type checking and linting benefits of that), but import and inline the code as a string. So we aren't shipping external worker files.

[notchris]

@bigtimebuddy Not sure if it's a side effect of manually patching Worker to see if I could get around the issue, but I started getting similar errors about document

[bigtimebuddy]

@notchris can you call out those document issues? Sure we can get that sorted too.

[notchris]

@bigtimebuddy Sure thing - it's actually not document, that was my mistake. The issue comes from extract method on app.renderer

/Users/notchris/Desktop/nodesdl-pixi/node_modules/@pixi/extract/src/Extract.ts:173
const imageData = new ImageData(new Uint8ClampedArray(pixels.buffer), width, height);
ReferenceError: ImageData is not defined

[bigtimebuddy]

@notchris extract.canvas doesn't work in Node. You need to use extract.pixels or extract.base64 instead.

[SuperSodaSea]

I wonder if we can keep the external worker.ts files (and all the type checking and linting benefits of that), but import and inline the code as a string. So we aren't shipping external worker files.

Currently the worker code is already inlined as a string (see WORKER_CODE in @pixi/assets/lib/_virtual/checkImageBitmap.worker.mjs), so we won't have any extra external worker file (for example, you can see the worker code in dist/pixi.js).

[notchris]

@notchris extract.canvas doesn't work in Node. You need to use extract.pixels or extract.base64 instead.

I'm referencing the official example: https://github.com/pixijs/node, but that's good to know. Should that be updated as well? I'm going to try out .pixels now!