Sign in to follow this  
rossi46

Help error when build pixijs with typescript and wepack

Recommended Posts

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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.

 

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.