Using Pixi with Vite+Typescript

[soylomass]

I'm migrating my game from Vue 2 to Vue 3, while also migrating Pixi from v5 to v6.

With Vue 2, I used Typescript+Webpack, while I'm using Typescript+Vite with Vue 3.

Everything was going fine, until I started re-implementing the PIXI plugins (like pixi-layers). I get a lot of compile time errors:

 

I tried both installing the plugins via NPM and installing them manually, but neither work.

Tried also adding this line to the top of the definition files:

/// <reference types="pixi.js-legacy" />

 

Maybe it worked with webpack because I had PIXI defined like this in webpack.config.js:

plugins: [
  new webpack.ProvidePlugin({
    PIXI: 'pixi.js-legacy'
  })
],

 

But I found no alternative in Vite.

 

Do you have any idea? I'm stuck until I can fix this.

 

Thanks in advance.

[ivan.popelyshev]

you dont need to provide stuff anymore.

Just use "import * as PIXI from 'pixi.js-legacy' "

Alternatively : re-export it in separate file and reference that file in all your other files

[soylomass]

Hi @ivan.popelyshev, thanks for your quick response.

The problem is in the types definition files. I've tried importing PIXI inside those files but I get other errors:

[ivan.popelyshev]

oh that, you should ask @eXponeta to update this thing. Kostya, is this your plugin?

[soylomass]

22 minutes ago, ivan.popelyshev said:

oh that, you should ask @eXponeta to update this thing. Kostya, is this your plugin?

I use only pixi-layers, but happens with others too as they use augmentation the same way.

[soylomass]

I've changed the definitions file a bit and it doesn't throw any more compilation errors, I don't know if it's right though

I put all the "declare"s inside "declare module 'pixi.js-legacy' {", and removed "PIXI." everywhere. I imported the needed types from pixi.js individually.

pixi-layers.d.ts

[ivan.popelyshev]

wow, thanks! gonna recommend it to other guys

[soylomass]

Well seems I was too quick to call victory. While the augmentation works partially, it seems to be overriding existing types instead of merging. We need a typescript expert ?

 

[soylomass]

Update:

Ok, it seems I had to put the augmentation inside the module where the class was defined, in Container's case, its @pixi/display. After doing that it doesn't throw any error and both original Container's properties + new ones are accessible.

 

 

pixi-layers.d.ts

Edited May 31, 2021 by soylomass

[ivan.popelyshev]

"@pixi/layers" version 1.0.1 is released, please try it in your project! Typings should work now. There's migration change about CanvasRenderer, look in README for it.

Edited June 3, 2021 by ivan.popelyshev

[soylomass]

8 minutes ago, ivan.popelyshev said:

"@pixi/layers" version 1.0.1 is released, please try it in your project! Typings should work now. There's migration change about CanvasRenderer, look in README for it.

Nice! Seems to be working now.

I see this TS error in its index.d.ts file, I don't know if it matters or not:

 

Edited June 3, 2021 by soylomass

[ivan.popelyshev]

oh my cow .. ok, gonna re-publish it

[ivan.popelyshev]

Done, try again, `1.0.2`

[soylomass]

20 minutes ago, ivan.popelyshev said:

Done, try again, `1.0.2`

All fine now! Thanks!