Tips to upgrade pixi.js version from 5.1.x to 6.0.4 ( latest ) when using TypeScript

[SenPie]

I wanted to make this post, because I had an issue with upgrading pixi.js from 5.1.1  to latest version, which currently is version 6.0.4. I am using TypeScript for my project, and when I updated the version for pixi I got many strange errors, which were not that easy to debug from logs and I struggled to fix. Here the log: https://pastebin.ubuntu.com/p/NXpXMGrzym/

Just if you look in release changes list between those versions, there were many typing changes, hot fixes, and even a whole project dedicated to fixing typing in pixi.js. Full list: https://github.com/pixijs/pixijs/releases. Fortunately, @ivan.popelyshev helped me and fixed those errors and I wanted to share with you some tips that may help you with your issues. However if you wanna see the actual changes, here is the commit link you can see exact changes he did to make the errors disappear: https://github.com/TheSenPie/pixi-playable-boilerplate/commit/fb9addc888b13c0f21fd5876d31d51b705b463be

 

#Step 1. Fix the imports

Before I used to do

import * as PIXI from 'pixi.js'

then I would use pixi classes like this

// method definition
export interface SomeInterface {
	someMethod(loader?: PIXI.Loader): PIXI.Loader;
}

However, better way to use pixi's tools in new version is to separately import the classes that you will use and use them like that. For example:

import { Loader } from 'pixi.js';

export interface SomeInterface {
	someMethod(loader?: Loader): Loader;
}

if changing this is not enough for errors to disappear, still leave them because it just looks nicer and let's us proceed to step 2.

#Step 2: Check naming for the classes

It may happen, that some classes used in older version got renamed in the new version and you would probably see error saying that the type definition for that classes is not exported in PIXI. If that happens look out what your class was renamed to, or how you can replace it.

In my case I was using LoaderResource and that typing was not present in the newer version, so it should be replaced with ILoaderResource. Also, I used IResourceDictionary, which should be replaced with Dict<ILoaderResource>, where Dict is from pixi utils.

Step 3: Fix your .tsconfig dammit!

This is temporary solution, but because of issues with TypeScript 4.0+ you should add this option to your .tsconfig and the errors may never be.

"skipLibCheck": true

 

Final note: look out that in newer version of pixi, that is 6.1.0 the ILoaderResource and LoaderResource are getting fixed, so you may again make changes related to them. And the issue with skipLibCheck is getting fixed in version 6.1.0, so you can again remove that option.

 

Good luck on your journey of bugfixing! And if you have anything you want to add to this discussion, I would only appreciate if you add your comment.