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:



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 comment
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.


Link to comment
Share on other sites


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.





Edited by soylomass
Link to comment
Share on other sites

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 by soylomass
Link to comment
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.

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.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...