Bug: 'Worker is not defined' with Pixi 7.4.0 and Node v18.17.1 about pixijs HOT 15 CLOSED

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

from pixijs.

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

from pixijs.

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.

from pixijs.

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

from pixijs.

@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!

from pixijs.

No worries!

from pixijs.

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\@[email protected]_@[email protected]\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

from pixijs.

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.

from pixijs.

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

from pixijs.

@SuperSodaSea Thank you!

from pixijs.

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.

from pixijs.

@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

from pixijs.

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

from pixijs.

@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

from pixijs.

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

from pixijs.