New import issue with pixi.js-legacy AND pixi-sound in PIXI 5.1.0 (WebPack, TypeScript)

[stagr]

Expected Behavior

import * as PIXI from 'pixi.js-legacy';
import sound from 'pixi-sound';

Importing pixi and pixi-sound as above should work and did work as expected in pixi 5.0.4. In 5.1.0 it does not work anymore.

Current Behavior

Using TypeScript and WebPack the above import does not seems to be working. For some reason there is a duplication of the static maps (Loader)Resource._xhrTypeMap and (Loader)Resource._loadTypeMap in the resource-loader.

This results in the resource-loader loading (for example) mp3 files as audio-elements instead of XHR.

Possible Solution

I believe that there is a duplication of the (Loader)Resource in someway. I saw that a new version of the resource-loader (2.2.4 to 3.0.1) was introduced in 5.1.0. That is a suspect.

Importing the LoaderResource explicitly using the form:

import { LoaderResource } from '@pixi/loaders';

gives me access to the same instance of (Loader)Resource as pixi-sound uses. Updating our legacy project to use only that kind of imports might be a workaround for us.

The following import and logging (in our legacy project):

import * as PIXI from 'pixi.js-legacy';
import sound from 'pixi-sound';
`import { LoaderResource } from '@pixi/loaders';`
console.log("PIXI.LoaderResource['_xhrTypeMap']", PIXI.LoaderResource['_xhrTypeMap']);
console.log("LoaderResource['_xhrTypeMap']", LoaderResource['_xhrTypeMap']);

prints out two different _xhrTypeMap:s. The one accessed by LoaderResource is the one that pixi-sound has changed to use XHR for MP3s. The one accessed through PIXI.LoaderResource is an unchanged version without MP3 entry.

It might be related to TypeScript and/or WebPack, maybe some detail about how imports and namespaces are handled.

It is not a browser issue (same behaviour in Chrome, Firefox, Edge, all latest).

Steps to Reproduce

I tried reproducing the issue using PixiJS Sound + Webpack Example (https://github.com/bigtimebuddy/pixi-sound-webpack-example) but even though I used the same import as mentioned above I could not recreate the issue.

Even using the same version of pixi.js-legacy, pixi-sound and WebPack as the project where the problem occurs I could not recreate the issue.

I will see if i get time to add TypeScript to that project also to further imitate our legacy project but for now this is all the information I have.

Environment

• pixi.js version: 5.0.1 (working in 5.0.4)
• TypeScript version: 3.3.3
• WebPack version: 3.8.1
• Browser & Version: Chrome Version 75.0.3770.142 (Official Build) (64-bit), Microsoft Edge 42.17134.1.0, Firefox 68.0.1 (64-bit)
• OS & Version: Windows 10
• Running Example: -

[ivanpopelyshev]

I believe issue like that in russian gamedev telegram chat. It even produced two pixi.js libs, with different PIXI.utils.TextureCache

[bigtimebuddy]

One thing to try is to clean your project and reinstall npm modules. This can happen if you are linking as well. Otherwise, if that doesn’t work, could you create a repo that reliably reproduces this problem?

[stagr]

I have tried repeatedly with:

rm -rf node_modules
npm cache clean --force
npm install
npm start

I will continue trying to recreate the issue basing it on PixiJS Sound + Webpack Example (https://github.com/bigtimebuddy/pixi-sound-webpack-example) and adding typescript. If that does not work I will see if I can clone our project and strip it to a bare minimum.

[stagr]

@bigtimebuddy, here's a stripped version of our project setup that recreates the problem:

https://github.com/stagr/pixi510-import-issue

Check comments and code in

src/index.tsx

and be sure to open developer console in browser to see the two instances of the maps that somehow have been created.

Any help on this is greatly apreciated, let me know if you need more information!

[bigtimebuddy]

Your package-lock.json is broken. I removed that and your node modules and re-installed. Basically, you had probably an old version of @pixi/loaders installed and newer version of pixi.js. Remove that file and reinstall. Works fine, objects are the same.

[stagr]

Thanks @bigtimebuddy you saved my day. Closing the issue.

I was under the impression that removing all node modules and cleaning the npm cache would start from scratch but reading up on NPM and the package-lock.json gives me some nightmares. I guess I will have to add

rm package-lock.json

to the cocktail of tools to do a totally clean swipe of a npm based project.

rm -rf node_modules rm package-lock.json npm cache clean --force npm install npm start