TypeError: animationFrame is undefined

Phaser 3
1

So I have made a game with multiple animatons. The game runs fine on the browser but when i build it for web application. It gives me a “TypeError: animationFrame is undefined”. When i logged anims in the console, I have all my animations and all my frames in browser mode but no frames for my animations in the built mode. Cant figure out why. Here is my code. Hope somebody can help me out.

preload()
    {
        this.scene.bringToTop();
        this.load.image('bgImg','images/Bg.jpg');
        this.load.image('turretImg','images/turret.png');
        this.load.image('bulletImg','images/Bullet.png');
        this.load.image('fireballImg','images/fireball.png');
        this.load.image('healthUnitImg','images/health_unit.png');
        this.load.spritesheet('orcParaSprSheet', 'images/parachute.png',{frameWidth: 128, frameHeight: 170});
        this.load.spritesheet('helicopterSprSheet','images/heliSheet.png',{frameWidth: 258, frameHeight : 130});
        this.load.spritesheet('dragonSprSheet','images/dracoGreenSheet.png',{frameWidth: 258, frameHeight : 258});
        this.load.spritesheet('orcSprSheet','images/orcSheet.png',{frameWidth: 130, frameHeight : 130});
        this.load.spritesheet('blastSprSheet','images/blastSheet2.png',{frameWidth: 258, frameHeight : 258});
    }
    create() 
    {
        scoreObject.ResetScore();

        this.leftOrcs = new Array(0);
        this.rightOrcs = new Array(0);
        this.isGameOver = false;
        this.orcHitCount = 0;

        this.anims.create({
            key: 'helicopterFlyAnim',
        repeat: -1, 
        frameRate : 12, 
        frames: this.anims.generateFrameNames('helicopterSprSheet',{start:0,end:3})
    });

    this.anims.create({
        key: 'dragonFlyAnim',
        repeat: -1, 
        frameRate : 8, 
        frames: this.anims.generateFrameNames('dragonSprSheet',{start:0,end:2})
    });

    this.anims.create({
        key: 'orcIdleAnim',
        repeat:0,
        frameRate: 12,
        frames: this.anims.generateFrameNames('orcSprSheet',{start:6,end:6})
    });

    this.anims.create({
        key: 'orcWalkAnim',
        repeat:-1,
        frameRate: 8,
        frames: this.anims.generateFrameNames('orcSprSheet',{start:0,end:5})
    });

    this.anims.create({
        key: 'orcDieAnim',
        repeat:0,
        frameRate: 8,
        frames: this.anims.generateFrameNames('orcSprSheet',{start:6,end:8})
    });

    this.anims.create({
        key: 'orcParachuteAnim',
        repeat: 0,
        frameRate: 8,
        frames: this.anims.generateFrameNames('orcParaSprSheet',{start:0,end:0})
    });

    this.anims.create({
        key:'blastAnim',
        repeat: 0,
        frameRate: 8,
        frames: this.anims.generateFrameNames('blastSprSheet',{start:0,end:4})
    });

    console.log(this.anims);
}

**EDIT : ** Solved. The issue was the casing in my image path files.

2

Should you be generating the frames from numbers and not names? generateFrameNumbers

3

Add to start of create():

console.log(this.textures.getTextureKeys());