Jump to content
GameMonetize.com © The leading broker of high quality cross-platform HTML5 games ×

Unable to load pixi.js as a module

Janizki

By Janizki,
in Pixi.js

 Share

Recommended Posts

Janizki Newbie

Janizki

Posted
Posted

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>

 

Link to comment
Share on other sites
jonforum Newbie

jonforum

Posted
Posted

did you take a look in some sample projet on codeSandbox?
Just in case, sometime people forget search here before.


https://codesandbox.io/s/app-architecture-3-t6cfv

https://codesandbox.io/s/92qj013rvr?file=/src/index.js

https://codesandbox.io/s/km262qnqr7

https://codesandbox.io/s/youthful-hertz-jzl912w7k9

 

Link to comment
Share on other sites
Janizki Newbie

Janizki

Posted
  • Author
Posted

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
ivan.popelyshev Enthusiast

ivan.popelyshev

Posted
Posted (edited)

> 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
Janizki Newbie

Janizki

Posted
  • Author
Posted

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...
Iko Newbie

Iko

Posted
Posted

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...
Martin Pabst Newbie

Martin Pabst

Posted
Posted (edited)

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": [
        "node_modules/resource-loader/typings/mini-signals.d.ts" 
      ],
    },
    "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.

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...
×
 Share
Go to topic listing

  • Recently Browsing   0 members

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