Sign in to follow this  
Janizki

Unable to load pixi.js as a module

Recommended Posts

Hi,

 

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": [
        "**/*.ts",
    ]
}

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

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

 

Share this post


Link to post
Share on other sites

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

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

Share this post


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...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.