Image of Error

I’m trying to use a player method from my player.js file which is defined as follows:

// src/player.js

class Player {
    constructor(name, x, y, radius, color) {
        this.name = name;
        this.x = x;         // x-coordinate
        this.y = y;         // y-coordinate
        this.radius = radius; // player size (radius for a circle)
        this.color = color;   // player color
        this.velocityX = 0;  // horizontal velocity
        this.velocityY = 0;  // vertical velocity
        this.speed = 5;      // movement speed
    }

    // Method to draw the player on the canvas
    draw(context) {
        context.beginPath()
        context.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false)
        context.fillStyle = this.color
        context.fill()
        // context.closePath();
    }

    // Method to update the player's position
    update() {
        this.x += this.velocityX;
        this.y += this.velocityY;
    }

    // Method to move the player based on input
    move(direction) {
        switch (direction) {
            case 'up':
                this.velocityY = -this.speed;
                break;
            case 'down':
                this.velocityY = this.speed;
                break;
            case 'left':
                this.velocityX = -this.speed;
                break;
            case 'right':
                this.velocityX = this.speed;
                break;
            default:
                this.velocityX = 0;
                this.velocityY = 0;
        }
    }

    // Method to stop the player
    stop() {
        this.velocityX = 0;
        this.velocityY = 0;
    }
}

export default Player

Then I have an index.js file that I am trying to call the player.js methods from (also defined as follows):

import './Box2D';
import Player from './player';

// Ensure Box2D is attached to the window object
const Box2D = window.Box2D;

// Log the Player class and its prototype
console.log('Player class:', Player);
console.log('Player prototype:', Player.prototype);

// Define the physics world
const world = new Box2D.Dynamics.b2World(
    new Box2D.Common.Math.b2Vec2(0, 10), // Gravity vector (0, 10)
    true // Allow sleep
);

// Create a static ground body
const groundBodyDef = new Box2D.Dynamics.b2BodyDef();
groundBodyDef.position.Set(10, 590 / 30); // Position in meters (convert pixels to meters)
const groundBody = world.CreateBody(groundBodyDef);
const groundBox = new Box2D.Collision.Shapes.b2PolygonShape();
groundBox.SetAsBox(400 / 30, 10 / 30); // Half-width and half-height in meters
groundBody.CreateFixture2(groundBox, 0);

// Set up the canvas and drawing context
const canvas = document.getElementById('gameCanvas');
const context = canvas.getContext('2d');

// Create a player instance
const player = new Player('Player1', 50, 50, 15, 'blue');

// Log the player instance and its methods
console.log('Player instance:', player);
console.log('Player instance draw method:', player.draw);
console.log('Player instance update method:', player.update);
console.log('Player instance move method:', player.move);
console.log('Player instance stop method:', player.stop);

// Main game loop
function gameLoop() {
    requestAnimationFrame(gameLoop);                        // Repeat the loop
    context.clearRect(0, 0, canvas.width, canvas.height);   // Clear the canvas
    player.update();                                        // Update player position
    player.draw(context);                                   // Draw player                      
}

// Event listeners for player movement
document.addEventListener('keydown', (event) => {
    switch (event.key) {
        case 'ArrowUp':
            player.move('up');
            break;
        case 'ArrowDown':
            player.move('down');
            break;
        case 'ArrowLeft':
            player.move('left');
            break;
        case 'ArrowRight':
            player.move('right');
            break;
    }
});

document.addEventListener('keyup', () => {
    player.stop();
});

// Start the game loop
gameLoop();

But I keep getting this error: TypeError: player.update is not a function
I’ve tried to console log al my methods to see what comes up but they’re all undefined for some reason (as shown in the image).

For context I am trying to make a game that uses physics (which I am using Box2d code physics). I also am using Babel and Webpack (chatgpt suggested it for some reason). If anyone can help I’d greatly appreciate it!

I added .babelrc file, I cleaned out my dist folder, I did npm install then npm build then npm start. I also added a couple of debugging lines and did a a Player.prototype console log. The player instance is being made but none of the methods are being recognized. I was hoping that this would just simply run and I could see a few things drawn on my HTML5 canvas