Help error when build pixijs with typescript and wepack

[rossi46]

i use webpack, typescript and pixijs to build my app. But when i build it has error: 

ERROR in ./node_modules/pixi.js/lib/index.js
    Module not found: Error: Can't resolve './accessibility' in 'D:\Zone\G1\Client\G1.Client\slots\node_modules\pixi.js\lib'
     @ ./node_modules/pixi.js/lib/index.js 34:21-47
     @ ./libs/libs.ts
     @ multi ./libs/libs.ts

    ERROR in ./node_modules/pixi.js/lib/index.js
    Module not found: Error: Can't resolve './core' in 'D:\Zone\G1\Client\G1.Client\slots\node_modules\pixi.js\lib'
     @ ./node_modules/pixi.js/lib/index.js 18:12-29
     @ ./libs/libs.ts
     @ multi ./libs/libs.ts

    ERROR in ./node_modules/pixi.js/lib/index.js
    Module not found: Error: Can't resolve './deprecation' in 'D:\Zone\G1\Client\G1.Client\slots\node_modules\pixi.js\lib'
     @ ./node_modules/pixi.js/lib/index.js 30:19-43
     @ ./libs/libs.ts
     @ multi ./libs/libs.ts

    ERROR in ./node_modules/pixi.js/lib/index.js
    Module not found: Error: Can't resolve './extract' in 'D:\Zone\G1\Client\G1.Client\slots\node_modules\pixi.js\lib'
     @ ./node_modules/pixi.js/lib/index.js 38:15-35
     @ ./libs/libs.ts
     @ multi ./libs/libs.ts

    ERROR in ./node_modules/pixi.js/lib/index.js
    Module not found: Error: Can't resolve './extras' in 'D:\Zone\G1\Client\G1.Client\slots\node_modules\pixi.js\lib'
     @ ./node_modules/pixi.js/lib/index.js 42:14-33
     @ ./libs/libs.ts
     @ multi ./libs/libs.ts

    ERROR in ./node_modules/pixi.js/lib/index.js
    Module not found: Error: Can't resolve './filters' in 'D:\Zone\G1\Client\G1.Client\slots\node_modules\pixi.js\lib'
     @ ./node_modules/pixi.js/lib/index.js 46:15-35
     @ ./libs/libs.ts
     @ multi ./libs/libs.ts

    ERROR in ./node_modules/pixi.js/lib/index.js
    Module not found: Error: Can't resolve './interaction' in 'D:\Zone\G1\Client\G1.Client\slots\node_modules\pixi.js\lib'
     @ ./node_modules/pixi.js/lib/index.js 50:19-43
     @ ./libs/libs.ts
     @ multi ./libs/libs.ts

    ERROR in ./node_modules/pixi.js/lib/index.js
    Module not found: Error: Can't resolve './loaders' in 'D:\Zone\G1\Client\G1.Client\slots\node_modules\pixi.js\lib'
     @ ./node_modules/pixi.js/lib/index.js 54:15-35
     @ ./libs/libs.ts
     @ multi ./libs/libs.ts

    ERROR in ./node_modules/pixi.js/lib/index.js
    Module not found: Error: Can't resolve './mesh' in 'D:\Zone\G1\Client\G1.Client\slots\node_modules\pixi.js\lib'
     @ ./node_modules/pixi.js/lib/index.js 58:12-29
     @ ./libs/libs.ts
     @ multi ./libs/libs.ts

    ERROR in ./node_modules/pixi.js/lib/index.js
    Module not found: Error: Can't resolve './particles' in 'D:\Zone\G1\Client\G1.Client\slots\node_modules\pixi.js\lib'
     @ ./node_modules/pixi.js/lib/index.js 62:17-39
     @ ./libs/libs.ts
     @ multi ./libs/libs.ts

    ERROR in ./node_modules/pixi.js/lib/index.js
    Module not found: Error: Can't resolve './polyfill' in 'D:\Zone\G1\Client\G1.Client\slots\node_modules\pixi.js\lib'
     @ ./node_modules/pixi.js/lib/index.js 6:16-37
     @ ./libs/libs.ts
     @ multi ./libs/libs.ts

    ERROR in ./node_modules/pixi.js/lib/index.js
    Module not found: Error: Can't resolve './prepare' in 'D:\Zone\G1\Client\G1.Client\slots\node_modules\pixi.js\lib'
     @ ./node_modules/pixi.js/lib/index.js 66:15-35
     @ ./libs/libs.ts
     @ multi ./libs/libs.ts

here is my code in libs.ts:

import * as PIXI from "pixi.js";

var util = {
    RandomFrom(min: number, max: number, normal: boolean) {
        return normal ? (Math.random() * (max - min + 1) + min) : Math.floor(Math.random() * (max - min + 1) + min);
    },
    ParseMoney(money: number, pre: any) {
        let p = ".";
        if (pre) p = pre;
        if (money == undefined) return "";
        let strMoney = money.toString().replace(/\B(?=(\d{3})+(?!\d))/g, p);
        return strMoney;
    },
    NumberToImage(number: any) {
        var html = "";
        var arr = number.split("");
        for (var i in arr) {
            if (arr.hasOwnProperty(i)) {
                html += (arr[i] === "." ? '<i class="dot"></i> ' : '<i class="n' + arr[i] + '"></i>');
            }
        }
        return html;
    },
    CountUp(target: any, isCanvas: boolean, isImages: boolean, startVal: number, endVal: number, decimals: number, duration: number, options: any) {

        var self = this;
        // default options
        self.options = {
            useEasing: true, // toggle easing
            useGrouping: true, // 1,000,000 vs 1000000
            separator: ",", // character to use as a separator
            decimal: ".", // character to use as a decimal
            easingFn: easeOutExpo, // optional custom easing function, default is Robert Penner's easeOutExpo
            formattingFn: util.ParseMoney, // optional custom formatting function, default is formatNumber above
            prefix: "", // optional text before the result
            suffix: "", // optional text after the result
            numerals: [] // optionally pass an array of custom numerals for 0-9
        };

        // extend default options with passed options object
        if (options && typeof options === "object") {
            for (var key in self.options) {
                if (options.hasOwnProperty(key) && options[key] !== null) {
                    self.options[key] = options[key];
                }
            }
        }

        if (self.options.separator === "") {
            self.options.useGrouping = false;
        }
        else {
            // ensure the separator is a string (formatNumber assumes this)
            self.options.separator = "" + self.options.separator;
        }

        // make sure requestAnimationFrame and cancelAnimationFrame are defined
        // polyfill for browsers without native support
        // by Opera engineer Erik M�ller
        var lastTime = 0;
        var vendors = ["webkit", "moz", "ms", "o"];
        for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
            window.requestAnimationFrame = (window as any)[vendors[x] + "RequestAnimationFrame"];
            window.cancelAnimationFrame = (window as any)[vendors[x] + "CancelAnimationFrame"] || (window as any)[vendors[x] + "CancelRequestAnimationFrame"];
        }
        if (!window.requestAnimationFrame) {
            window.requestAnimationFrame = callback => {
                var currTime = new Date().getTime();
                var timeToCall = Math.max(0, 16 - (currTime - lastTime));
                var id = window.setTimeout(() => { callback(currTime + timeToCall); }, timeToCall);
                lastTime = currTime + timeToCall;
                return id;
            };
        }
        if (!window.cancelAnimationFrame) {
            window.cancelAnimationFrame = id => {
                clearTimeout(id);
            };
        }
        // Robert Penner's easeOutExpo
        function easeOutExpo(t: number, b: number, c: number, d: number) {
            return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
        }
        function ensureNumber(n: any) {
            return (typeof n === "number" && !isNaN(n));
        }

        self.initialize = () => {
            if (this.initialized) return true;

            this.error = "";
            if (isCanvas) {
                this.d = target;
            }
            else
                this.d = (typeof target === "string") ? document.getElementById(target) : target;
            if (!this.d) {
                this.error = "[CountUp] target is null or undefined"
                return false;
            }
            this.startVal = Number(startVal);
            this.endVal = Number(endVal);
            // error checks
            if (ensureNumber(this.startVal) && ensureNumber(this.endVal)) {
                this.decimals = Math.max(0, decimals || 0);
                this.dec = Math.pow(10, this.decimals);
                this.duration = Number(duration) * 1000 || 2000;
                this.countDown = (this.startVal > this.endVal);
                this.frameVal = this.startVal;
                this.initialized = true;
                return true;
            }
            else {
                this.error = "[CountUp] startVal (" + startVal + ") or endVal (" + endVal + ") is not a number";
                return false;
            }
        };

        // Print value to target
        self.printValue = function (value: any) {
            var result = self.options.formattingFn(value);
            if (isCanvas)
                self.d.text = result;
            else {
                if (self.d.tagName === "INPUT") {
                    this.d.value = result;
                }
                else if (self.d.tagName === "text" || self.d.tagName === "tspan") {
                    this.d.textContent = result;
                }
                else {
                    if (isImages)
                        self.d.innerHTML = util.NumberToImage(result);
                    else
                        self.d.innerHTML = result;
                }
            }
        };

        self.count = (timestamp: any) => {

            if (!this.startTime) { this.startTime = timestamp; }

            this.timestamp = timestamp;
            var progress = timestamp - this.startTime;
            this.remaining = this.duration - progress;

            // to ease or not to ease
            if (this.options.useEasing) {
                if (this.countDown) {
                    this.frameVal = this.startVal - this.options.easingFn(progress, 0, this.startVal - this.endVal, this.duration);
                } else {
                    this.frameVal = this.options.easingFn(progress, this.startVal, this.endVal - this.startVal, this.duration);
                }
            } else {
                if (this.countDown) {
                    this.frameVal = this.startVal - ((this.startVal - this.endVal) * (progress / this.duration));
                } else {
                    this.frameVal = this.startVal + (this.endVal - this.startVal) * (progress / this.duration);
                }
            }

            // don't go past endVal since progress can exceed duration in the last frame
            if (this.countDown) {
                this.frameVal = (this.frameVal < this.endVal) ? this.endVal : this.frameVal;
            } else {
                this.frameVal = (this.frameVal > this.endVal) ? this.endVal : this.frameVal;
            }

            // decimal
            this.frameVal = Math.round(this.frameVal * this.dec) / this.dec;

            // format and print value
            this.printValue(this.frameVal);

            // whether to continue
            if (progress < this.duration) {
                this.rAF = requestAnimationFrame(this.count);
            } else {
                if (this.callback) this.callback();
            }
        };
        // start your animation
        self.start = (callback: any) => {
            if (!this.initialize()) return;
            this.callback = callback;
            this.rAF = requestAnimationFrame(this.count);
        };
        // toggles pause/resume animation
        self.pauseResume = () => {
            if (!this.paused) {
                this.paused = true;
                cancelAnimationFrame(this.rAF);
            } else {
                this.paused = false;
                delete this.startTime;
                this.duration = this.remaining;
                this.startVal = this.frameVal;
                requestAnimationFrame(this.count);
            }
        };
        // reset to startVal so animation can be run again
        self.reset = () => {
            this.paused = false;
            delete this.startTime;
            this.initialized = false;
            if (this.initialize()) {
                cancelAnimationFrame(this.rAF);
                this.printValue(this.startVal);
            }
        };
        // pass a new endVal and start animation
        self.update = (newEndVal: any) => {
            if (!this.initialize()) return;
            newEndVal = Number(newEndVal);
            if (!ensureNumber(newEndVal)) {
                this.error = "[CountUp] update() - new endVal is not a number: " + newEndVal;
                return;
            }
            this.error = "";
            if (newEndVal === this.frameVal) return;
            cancelAnimationFrame(this.rAF);
            this.paused = false;
            delete this.startTime;
            this.startVal = this.frameVal;
            this.endVal = newEndVal;
            this.countDown = (this.startVal > this.endVal);
            this.rAF = requestAnimationFrame(this.count);
        };

        // format startVal on initialization
        if (self.initialize()) self.printValue(self.startVal);
    }
};
class Loader {
    public loader: any;
    constructor() {
        this.loader = new PIXI.loaders.Loader();
    }
    public add(arr: any) {
        for (let i = 0; i < arr.length; i++) {
            if (arr[i].id !== "")
                this.loader.add(arr[i].id, arr[i].src);
            else
                this.loader.add(arr[i].src);
        }
    }
    public load(process: any, complete: any) {
        this.loader.load();
        if (typeof process === "function")
            this.loader.on("process", process(this.loader.process));
        if (typeof complete === "function")
            this.loader.onComplete(complete);
    }
    public delete(){
        this.loader.destroy();
    }
};

export {util as Util, Loader };

what wrong with this code. Thanks. I attacked my project.

slots.rar

[llpujol]

Hi Rossi, 

Have you checked that pixi.js have been correctly installed in your dependencies? (node_modules)

The index.js file yes it seems correctly encountered: ./node_modules/pixi.js/lib/index.js , but not all folders in it like  ./node_modules/pixi.js/lib/accessibility  or ./node_modules/pixi.js/lib/core

[rossi46]

On 10/14/2018 at 3:28 PM, llpujol said:

Hi Rossi, 

Have you checked that pixi.js have been correctly installed in your dependencies? (node_modules)

The index.js file yes it seems correctly encountered: ./node_modules/pixi.js/lib/index.js , but not all folders in it like  ./node_modules/pixi.js/lib/accessibility  or ./node_modules/pixi.js/lib/core

I had check. I use @types/pixi.js - it's ok

[llpujol]

mmmm okay, but @types/pixi.js has nothing to do with what I mentioned... What you have to check is if pixi.js is correctly installed as a dependency. If the files are there, webpack should find them and all has to be okay...

One thing I see is that in your package.json, you have pixi.js as a devDependency, but it should go on the dependency object, like this:

"devDependencies": {
    "@types/pixi.js": "4.8.1",
    "clean-webpack-plugin": "0.1.19",
    "ts-loader": "5.2.1",
    "typescript": "3.1.2",
    "webpack": "4.20.2",
    "webpack-cli": "3.1.2"
  },
  "dependencies": {
    "pixi.js": "4.8.2"
  }

Maybe this solves the issue, can you try it?

If you continue having problems to bundle pixi.js with webpack, you can try this pixi.js quickstart project: 

https://github.com/llorenspujol/parcel-pixijs-quickstarter
 

And if you have troubles too, you can post an issue on github, and I will resolve it.

Hope this helps.