Import PixiJS as ESM without bundlers

[NemoStein]

I'm trying to import Pixi in a Snowpack application, but, although the Pixi package on NPM contains a esm file (/lib/pixi.es.js), it can't be loaded directly in browser, as it uses node's native libs (e.g.: url).

Is it possible to import PixiJS as an ES Module, without the use of Rollup, Webpack or any other bundler?

[bigtimebuddy]

Rollup, Webpack and Parcel all can provide builtin polyfills for Node’s url and path utils. I’m not familiar with Snowpack, but could you overrides these? There are also public packages (e.g., url) by the same name you could may install alongside?

The other option is to remove any node-like dependencies from the project. I’d first try to find a Snowpack workaround for this problem before we do that. Also, those other bundles mentioned above are all unofficially supported by pixi. A Snowpack-based boilerplate project would be helpful to test this and work out the best way to support this tool too.

[NemoStein]

to support this tool too

That's the thing... I'd like to use no such tools.
Snowpack doesn't transform your code in anyway (it can, but that isn't the point). The idea is to use open web standards only.

[bigtimebuddy]

Just because it’s a web standard doesn’t mean Pixi supports it. There are lots of modern browser features that we don’t support yet because adoption is low or we are still trying to run in a broad array of browsers. This is the first request for running ES modules directly. It’s not a bad idea but not a huge priority at the moment.

The ES build was added to support tree shaking with bundling not to run in the browser using module importing.

If someone wants to take on this task, we would consider a PR.

[SagnikPradhan]

Quite a bummer you guys don't have an es module version.

[mmahandev]

This would be something great to have

[bigtimebuddy]

Okay, I hear you all. We will work on a browser-based ESM bundle.

[SagnikPradhan]

For the time being I created this. The problem I had was that transpiling the libraries in dev mode made it too slow. Hence the solution.

[DrSensor]

@SagnikPradhan 404 broken link 🤔

[bigtimebuddy]

@DrSensor here are the official builds from the dev branch. We don't yet have a release, but these will be in v5.4.0.

• https://pixijs.download/dev/pixi.mjs
• https://pixijs.download/dev/pixi.min.mjs
• https://pixijs.download/dev/pixi-legacy.mjs
• https://pixijs.download/dev/pixi-legacy.min.mjs

Example

https://github.com/bigtimebuddy/pixi.js-browser-module-example

[SagnikPradhan]

@DrSensor Sorry, here is the new link. Ended up turning the simple script into a package.

[markemerge]

Any idea where how to import types for ES6 imports with types?

[ivanpopelyshev]

Any idea where how to import types for ES6 imports with types?

tell me your set up. I thought types are working in all configs

[markemerge]

Thanks you your prompt response!

I'm using TypeScript using ESM imports. I'm not using a bundler - simple converting all the .ts files to .js for now. I'm using gulp to do this.

I have a TypeScript file where I'm trying to access pixi.js, copied out of node_modules/pixi.js/dist/browser/pixi*.*

I then copied the node_modules/pixi.js/index.d.ts, renamed it to pixi.d.ts and put it in the same folder. TypeScript seems to like it but I get an error from the compiler.

/Users/sparkyspider/EmergeProjects/gulp/node_modules/mini-signals/typings/mini-signals.d.ts(19,2): error TS2309: An export assignment cannot be used in a module with other exported elements.
TypeScript: 1 semantic error
TypeScript: emit succeeded (with errors)

/Users/sparkyspider/EmergeProjects/gulp/node_modules/gulp-typescript/release/output.js:131
            this.streamFull.emit('error', new Error("TypeScript: Compilation failed"));
                                          ^
Error: TypeScript: Compilation failed
    at Output.mightFinish (/Users/sparkyspider/EmergeProjects/gulp/node_modules/gulp-typescript/release/output.js:131:43)
    at /Users/sparkyspider/EmergeProjects/gulp/node_modules/gulp-typescript/release/output.js:44:22
    at processTicksAndRejections (node:internal/process/task_queues:93:5)

Process finished with exit code 1

The source on the page I'm using looks like this:

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

export class _DropJoystick {

    private readonly canvas:HTMLCanvasElement;
    private readonly pixiApp:PIXI.Application;
    private readonly window:Window;

    constructor(_window:Window, canvas:HTMLCanvasElement) {

        this.canvas = canvas;
        this.window = _window;
        this.pixiApp = new PIXI.Application({width: this.window.innerWidth, height: this.window.innerHeight, view: canvas, transparent:true, resizeTo:this.window, antialias:true});

    }

    test() {
        let g = new PIXI.Graphics();
        g.beginFill(0xFF0000)
        g.drawCircle(50,50, 100);
        this.pixiApp.stage.addChild(g);
    }
}

Perhaps my whole approach is wrong, but I'd really like to use simple ES6 imports, just writing in typescript and converting each file to JavaScript.

Happy to be pointed in a different direction.

I see there is mention of a mini-signals.d.ts issue here

[ivanpopelyshev]

Can this help you? https://github.com/pixijs/pixijs/wiki/v6-Migration-Guide#typings

[markemerge]

Can this help you? https://github.com/pixijs/pixijs/wiki/v6-Migration-Guide#typings

No idea why that worked, but it did. Thank you!!!