Texture.frame missing: Matter Physics (Solved)

Phaser 3
1

Edit 1: After inspecting further, it has something to do with loading an image vs loading an atlas. For some reason, images don’t work while atlases do.

Edit 2: Okay, so I looked at the phaser documentation for matter sprites and I noticed that you need a frame and options. So what I was doing with the images was I was passing options into a frame. Here is the proper syntax for an image:
this.matter.add.sprite(x, y, 'sprite', null, {shape: shapes.sprite}); Note the null before the {}.

I am attempting to use matter physics and figured I would get started with a tutorial. I am following this one. I have all the right files, but I get this error:
Texture.frame missing: [object Object] get--phaser.js:36195
I am doing this on my own server so no it isn’t because of file restrictions.
Here is my code:

const config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 600,
    height: 800,
    scene: {
        preload: preload,
        create: create
    },
    physics: {
        default: 'matter',
        matter: {
            debug: true
        }
    }
};

var game = new Phaser.Game(config);

function preload ()
{
    this.load.image('paint', 'assets/playerNew.png');

    //  Load body shapes from JSON file generated using PhysicsEditor
    this.load.json('shapes', 'shapes.json');
}

function create ()
{
    this.matter.world.setBounds(0, 0, 600, 800);

    var shapes = this.cache.json.get('shapes');


    this.input.on('pointerdown', function (pointer)
    {
        this.matter.add.sprite(pointer.x, pointer.y, 'paint', { shape: shapes.banana });

    }, this);
}

Edit: I just tried downloading their code and it works perfectly fine. So there is some issue with how I adapted their code. Any suggestions?