How do I import Pixi.js into a TypeScript project?

Question

I'm new to Pixi.js but I have some past experience with TypeScript. I'm really struggling to import Pixi.js into my project.

I got a small Pixi.js project running using a CDN import of Pixi and vanilla JavaScript, and now I'm trying to get that same project running on TypeScript. I think one of my options would be to use the CDN import of Pixi and then import the type definitions for Pixi, but I read in several places that the later versions of Pixi are already written in TypeScript, so I don't think it's a good option for me to use a JavaScript version of the library and then import my own TypeScript definitions.

I tried using npm install pixi.js and then import * as PIXI from "pixi.js"; but that gives me this TypeScript error: This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag. and it also gives me this browser error when I force it to compile anyway: Uncaught TypeError: Failed to resolve module specifier "pixi.js". Relative references must start with either "/", "./", or "../". Uncaught TypeError: Failed to resolve module specifier "pixi.js". Relative references must start with either "/", "./", or "../". This error makes sense to me, because clearly telling the browser to find pixi.js will result in no file being found, since it's a Node.js module.

I tried changing import * as PIXI from "pixi.js"; to import PIXI from "pixi.js"; to get rid of the "only use default import" error, but that just gives me a "pixi.js has no default export" error, which seems to be in direct contrast with the error I was getting before, saying that it only has a default export...

And even if I manage to get rid of the TypeScript errors, I still can't wrap my head around how this would function properly anyway since the browser has no idea what "pixi.js" is when it's referring to a Node module that doesn't even exist inside the browser...

So all of this leads me to my question of how do I get a Pixi.js program running with TypeScript? I've looked up tutorials many times but every single one includes something like Webpack, Browserify, etc. I would not like to use any bundlers/other dependencies at all, I simply want to write TypeScript code, compile it, and have it give me some.js files that I can pop directly into a.html file and run in my browser. Is this possible?

My findings thus far have been that what I'm looking for is (somehow) not possible. I've found that my options are either to import the vanilla JavaScript version of Pixi and just go without type information (and do some hacky workarounds to get TypeScript to not think PIXI is undefined), or use a bundler like Webpack. Neither of those are ideal, and I have to think there's another option...

Answer 1

It would depend on your setup, but you could try something like this:

import { Sprite } from '@pixi/sprite';
new Sprite()

or you could try importing all as PIXI like this

import * as PIXI from 'pixi.js';
new PIXI.Sprite()

Answer 2

You must have figured this out but still I want this answer to be here for other to see.

This is my demo project on github that you can clone and use. It has typescript and pixi.js installed. THIS PROJECT USES VITE instead of webpack which is very complicated. pxts:pixi.js setup library

Some of things you must keep in mind

• Pixi.js version 6 has typescript types bundled along.
• Most of the examples on line are old and out of date
• Latest pixi version is v 7.x for which there is no community support yet.
• link for version 6.5.8 docs
• While working with version 6.x you have to install Assets separately where as in Version 7.x its bundled in.
• OLD AND OUT OF DATE TUTORIALS ONLINE is the main reason for confusion. Do check which version you have got installed.