Jump to content

Using Pixi with Vite+Typescript


Recommended Posts

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:

Screenshot_291.png.6a10c9c74a69fcf4f198506bc7892a84.png

 

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.

Link to post
Share on other sites

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 :P

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

Link to post
Share on other sites

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 😂

 

Screenshot_299.png.016bb079f14bb089e742253ac0610629.png

Screenshot_300.png.5fe4c8a49dd0c3f024a3edbcafd4e15f.png

Link to post
Share on other sites
Posted (edited)

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.

 

Screenshot_301.png.186202123d1a5565e01223b81f15ecd7.png

 

pixi-layers.d.ts

Edited by soylomass
Link to post
Share on other sites
Posted (edited)
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:

 

Screenshot_308.png

Edited by soylomass
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...