Having trouble importing a class

JavaScript
, , ,
1

I’m watching this YouTube tutorial from freeCodeCamp.org
Around 9:41 seconds, he imports the “Paddle” class from paddle.js.

I follow this exact code but I keep getting an error in my console: Unexpected identifier ‘Paddle’. import call expects one or two arguments.

I’ve searched for solutions and tried using their code but they don’t work either. Can someone help me figure out how to get rid of these errors? I’m not good with classes in JS.

Here is my code:
index.html

    <head>
        <title>Game Development</title>
        <meta charset="UTF-8"/>

        <style>
            #gameScreen {
                border: 1px solid black;
            }
        </style>
    </head>

    <body>
        <canvas id = "gameScreen" width="800" height="600">

        </canvas>

        <script src="src/index.js"></script>

    </body>
</html>

index.js

import Paddle from '/src/paddle'

let canvas = document.getElementById("gameScreen");
let ctx = canvas.getContext('2d');

const GAME_WIDTH = 800;
const GAME_HEIGHT = 600;

ctx.clearRect(0, 0, 800, 600);

let paddle = new Paddle(GAME_WIDTH, GAME_HEIGHT);

paddle.draw(ctx);

paddle.js


export default class Paddle {
    constructor (gameWidth, gameHeight) {
        this.width = 150;
        this.height = 30;

        this.position = {
            x: gameWidth / 2 - this.width / 2,
            y: gameHeight - this.height - 10
        }
    }

    draw(ctx) {
        ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
    }
}

Thanks for any help in advance!

2

One thing that does appear to be missing is your script type. It should be

<script src="src/index.js" type="module"></script>
3 Likes
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.