5

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 "../". 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...

OOPS Studio
  • 732
  • 1
  • 8
  • 25
  • I think you are making life harder for yourself by intentionally avoiding bundlers. May i ask why? But if you are really stubborn the may try some ways as described in https://stackoverflow.com/a/42880201/3174731 or https://mattallan.me/posts/modern-javascript-without-a-bundler/ . It seems that you will need to do similar job as the bundlers are doing, but "manually" (harder). Plus: your compiled code will have less features like browser compatibility etc. – domis86 Jan 26 '22 at 21:43
  • If you change your mind then i recommend this tutorial (there is example boilerplate repo with pixi+webpack) : https://www.pixijselementals.com/ . It covers also other more advanced PIxi.js related stuff. Enjoy :) – domis86 Jan 26 '22 at 21:47
  • Do you managed to compile other things that can then work in browser successfully? Or do you start with Pixi.js? – domis86 Jan 28 '22 at 21:36
  • `Why am I being forced to install new (and less-flexible) ways to do things that I can already do? ` Why do you think they are less flexible? My advice is to find something that is already working and then modify it to your needs. If you want to go with exotic ways like "no bundlers", no "third party servers", "no libraries" then prepare for more obstacles and hard time :) – domis86 Jan 28 '22 at 21:41
  • And one more thing: dont let IDE dictate which tools / plugins / libraries you can use. If you are forced to develop something because IDE is forcing you this way then probably you need to change IDE to be more flexible :) Or dont use IDE for everything - sometimes good old CLI tools are the best. – domis86 Jan 28 '22 at 21:44

2 Answers2

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()
Alex Pedersen
  • 19
  • 3
0

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.
Bilal Tariq
  • 1
  • 1