Closed gapgag55 closed 2 years ago
Temporary fix is to do this assignment before importing PIXI:
global.globalThis = global.window;
I've tried to fix this @mutewinter @gapgag55 just now
please try latest version ^2.3.23
I actually ended up making my own polyfill with the minimal includes I needed for my Pixi / React Pixi app.
import jsdom from 'jsdom';
export default function createHeadlessCanvas() {
const dom = new jsdom.JSDOM(`<!DOCTYPE html><body><canvas /></body></html>`, {
pretendToBeVisual: true,
resources: 'usable',
});
const {
window,
window: { document },
} = dom;
global.document = document;
// PIXI uses globalThis as if it were window, so we overwrite specific
// functions it expects
global.globalThis.addEventListener = window.addEventListener.bind(window);
global.globalThis.removeEventListener = window.removeEventListener.bind(
window,
);
global.globalThis.requestAnimationFrame = window.requestAnimationFrame.bind(
window,
);
global.globalThis.cancelAnimationFrame = window.cancelAnimationFrame.bind(
window,
);
global.navigator = window.navigator;
global.HTMLImageElement = window.HTMLImageElement;
global.HTMLVideoElement = window.HTMLVideoElement;
global.HTMLCanvasElement = window.HTMLCanvasElement;
global.XMLDocument = window.XMLDocument;
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
global.Image = window.Image;
return document.querySelector('canvas') as HTMLCanvasElement;
}
JSDom can actually take care of requestAnimationFrame
, but only if you pass pretendToBeVisual: true
. I also added resources: 'usable'
which makes image fetching work! Greatly reduces the amount of code needed to polyfill (for my use case).
nice! closing then as afaik the fix works now
I face the problem of initializing the PIXI application
My code is that
And output
I guess it's related to jsdom-global