Jump to content

Unable to load pixi.js as a module


Recommended Posts



I have a problem where i'm trying to use pixi.js thogether with three.js.


I'm able to import and use three.js just fine with its npm install, but for some reason no matter how i try to spin it around, pixi.js refuses to load into the node express server i have made for testing.

I have tried countless different ways from searching around and i find nothing that has helped so far.

here is the code from all the various files that i think are relate this issue.

The best i can make happen is the situation right now, the code is recognizing pixi.js and intellisence is giving me all the right suggestions etc.

but as soon as i nodemon the server online this comes up with the current code into the console .

Uncaught TypeError: Failed to resolve module specifier "pixi.js". Relative references must start with either "/", "./", or "../".

Can anyone please help me to atleast be able to import pixi into the server. :)


I can give any info you guys want if more is needed.


//IN client.ts

import * as PIXI from "pixi.js";

//tsconfig.json for client.ts

    "compilerOptions": {
        "target": "ES6",
        "module": "ES6",
        //"typeRoots": ["node_modules/pixijs"],
       // "types": ["pixi.js"],
        "outDir": "../../dist/client",
        "baseUrl": ".",
        "paths": {
            "/build/three.module.js": ["../../node_modules/three/src/Three"],
            "/jsm/*": ["../../node_modules/three/examples/jsm/*"],
            "/pixi.js/*": ["../../node_modules/pixi.js/*"]
        "moduleResolution": "node"
    "include": [

//in client.js 

import * as PIXI from "pixi.js";

// IN server.ts

const port: number = 3000;

class App {
    private server: http.Server;
    private port: number;

    constructor(port: number) {
        this.port = port;
        const app = express();

        app.use('/pixi.js', express.static(path.join(__dirname, '../../node_modules/pixi.js/pixi.js')));

        this.server = new http.Server(app);

    public Start() {
        this.server.listen(this.port, () => {
            console.log( `Server listening on port ${this.port}.` );

new App(port).Start();

//IN index.HTML

<!DOCTYPE html>

        <meta charset="utf-8" />
        <title>Game Task</title>
        <link rel="stylesheet" href="style.css">
            <canvas id="canv1"></canvas>
            <script type="module" src="client.js"></script>


Link to comment
Share on other sites

Link to comment
Share on other sites

I did check that out at one point.

And i dont see anything that really helps ?

problem here is that because of threejs i have to use type=module  in the index.html script call.

Also need to use typescript in this project so that kinda makes things a bit more complicated i guess. 

Unless i have gotten something wrong that is too obvious to see, i think i have missed something crucial using pixi in typescript projects and also being forced to use type module in the js file the tsc creates and is called into the .html

Link to comment
Share on other sites

Also need to use typescript in this project so that kinda makes things 

That's the biggest problem with all those modules. ES6 modules + typescript + vanilla modules support in the same library = huge headache. Its not a pixi problem, its whole JS stack problem, and we add pixi plugins to it - it blows up with bigger mushroom cloud. Be patient and debug whats is wrong with it.

Yes, in theory it should be "oh user just <script module> and everything works. Lib devlevopers? Backwards compatibility? What is that? Nah, they'll manage" and that's what creators of ES6 modules thought. 

Edited by ivan.popelyshev
Link to comment
Share on other sites

So thats the weird thing. i debugged it to the point where no errors are given codewise or for the imports in visual code. but as soon as i start that server it tells me in essence that pixi items are not constructors. no matter what pixi module i try to use.

i have checked like 5 times and all the paths are right, all names are correct etc. ive tried linking it tothe pixi.js.d.ts file, tried linking it to the pixi.js in lib and in dist....i am horribly stuck on what to try and debug next. Any suggestions are helpful atm.

Link to comment
Share on other sites

  • 2 weeks later...

Janiski I'm a total newbie so I hope my reply is not just noise to the conversation

Shouldn't the import be

import * as PIXI from "./pixi.js";

instead of

 import * as PIXI from "pixi.js"; 

as the error suggest.

Uncaught TypeError: Failed to resolve module specifier "pixi.js". Relative references must start with either "/", "./", or "../".

Link to comment
Share on other sites

  • 11 months later...

I got pixijs loaded as module with this strategy:

1.: Add this to tsconfig.json:

  "compilerOptions": {
    "moduleResolution": "node", 
    // Loaders needs this to use the more strict mini-signal types
    "paths": {
      "mini-signals": [
    "allowSyntheticDefaultImports": true, 
    "allowUmdGlobalAccess": true,         
    "baseUrl": "./",

2.: I wrote a short typescript definition file to inject identifier PIXI into global scope: call it e.g. pixiNamespace.d.ts and place it anywhere where typescript can find it, e.g. simply among your ts-files:

import * as PIXI from "pixi.js";

export as namespace PIXI;
export = PIXI;

3. Add this to the <head>-element of your index.html-file:

    <script src="lib/pixijs/pixi.js"></script>
    <script type="module" src="YourMainFile.js"></script>

Now you can use all PIXI classes inside your .ts-files without import statements. Just prefix them with "PIXI", e.g.

let matrix = new PIXI.Matrix().copyFrom(wh.stage.localTransform);


Edited by Martin Pabst
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...