Bug: Facebook Sdk Initialization Error about pixijs

[talhaozdemir]

//assets.ts

import manifest from "./manifest.json";
import { Assets } from "pixi.js";

.
.
.
export async function initAssets() {
await Assets.init({ manifest });
const assets = await Assets.loadBundle(["fonts", "default", "sounds", "shop"]);
.
.
.
}

[bigtimebuddy]

This is the code likely where this is happening:

pixijs/packages/assets/src/resolver/Resolver.ts

Lines 651 to 656 in abecc35

	for (const key in results)
	{
	const asset = results[key];
	assets[this._extractAssetIdFromBundle(bundleId, key)] = asset;
	}

There are other ways we could write this which would exclude things on the prototype.

[SuperSodaSea]

I mean, Object.freeze(Object.prototype) before window.fbAsyncInit = function() { ...

[SuperSodaSea]

@bigtimebuddy Perhaps we could consider adding guard-for-in to our @pixi/eslint-config?

https://github.com/pixijs/eslint-config/blob/0bc65621ec0fc2e477f1c060ceb6a94b8975e5ac/index.js#L66

[talhaozdemir]

Nice, both of them solved the issue, I can use these for quick fix.

[SuperSodaSea]

Can you show how you import and use PixiJS? It would be nice if you could provide a full stack trace of the errors.

[talhaozdemir]

I logged the paths, they may help you.

[talhaozdemir]

If I remove Facebook SDK from index.html, undefined consoles disappear that above picture.

[bigtimebuddy]

Maybe try debugging at the promises call in the stack. See what the assetsToLoad looks like.

[talhaozdemir]

Here it is;

with Facebook SDK

without

[talhaozdemir]

I also need to mention that sometimes it doesn't give the error in Chrome, and the application opens, but it always gives the error in Firefox.

[SuperSodaSea]

Looks like the Facebook SDK injected the array somewhere 🤔

[bigtimebuddy]

Wow, that is wild. I agree that it sounds like some prototype stuffing via Facebook SDK.

If you can track down where in Assets those extra keys are added, it might give us a clue. If you do console.log([], Array.prototype, {}, Object.prototype) and see if that has getParams, getConfig, etc? Can you repro this outside Pixi?

[talhaozdemir]

these?

[talhaozdemir]

I don't think that I can reproduce this issue outside of Pixi. On the other hand, I run it under the Facebook URL as a localhost. I mean the url is like:

https://www.facebook.com/embed/instantgames/1111111111111111/player?game_url=https%3A%2F%2Flocalhost%3A8080

[bigtimebuddy]

That's super annoying on Facebook's part.

One idea is that we might want to use Object.create(null) instead of {} which would remove any prototype-chain and insulate us from this issue. There are a bunch of areas in Assets that do this type of assignment. For example:

pixijs/packages/assets/src/Assets.ts

Line 556 in abecc35

const out: Record<string, Record<string, any>> = {};

[SuperSodaSea]

As a workaround, maybe you can try to Object.freeze(Object.prototype) before everything?

[bigtimebuddy]

For instance, Object.getOwnPropertyNames(results) would give us more stable results.

[talhaozdemir]

I have both tried Object.create(null) and Object.freeze(Object.prototype). The error appears in both cases.

[talhaozdemir]

@bigtimebuddy I tried your last suggestion:

and I got a different error

[talhaozdemir]

@SuperSodaSea in your case: Object.freeze(Object.prototype) before window.fbAsyncInit = function() { ...

I get TypeErrors:

[SuperSodaSea]

What about Object.seal(Object.prototype) or Object.preventExtensions(Object.prototype)?