I'm trying to import a JS class from the file "paddle.js" to be used in another file "game.js" (no JS libraries or frameworks used, just pure simple VanillaJS), and I can't seem to figure why this import/export is not not working. I have seen too many examples and tutorials of this, and I'm doing exactly as they say, but it just does'nt work. It might be a silly question, but any help is appreciated.
This is from a YT tutorial that I'm following, and I'm basically just going with the approach of adding "export default class Paddle" at the top of paddle.js, and including an import statement like "import Paddle from './paddle' ", in game.js. And then instantiating that class in game.js file. But it doesn't work. I've already tried all combinations like:
import Paddle from 'paddle'
import Paddle from './paddle'
import Paddle from '/paddle'
import Paddle from 'paddle.js'
import Paddle from './paddle.js'
None of them work.
// File: paddle.js
export default class Paddle{
constructor(gameWidth, gameHeight){
// some code
}
draw(ctx){
// a function in this class
}
}
// file: game.js
import Paddle from './paddle.js';
//var Paddle = require('paddle'); this doesn't work either
let c = document.getElementById("gameScreen");
let ctx = c.getContext("2d");
ctx.fillRect(20, 20, 100, 100); // would print a rectangle as a test
const GAME_WIDTH = 800;
const GAME_HEIGHT= 600;
//ctx.clearRect(0, 0, 800, 600);
let paddle = new Paddle(GAME_WIDTH, GAME_HEIGHT); // instantiating Paddle
paddle.draw(ctx);
// end
It is expected to successfully instantiate the paddle class, and draw a paddle on my html5 canvas. But instead, the inclusion of the import statement in the beginning causes the file to not function at all, i.e. my canvas is empty.
edit(as asked by some viewers): // Here is my js_game.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>VanillaJS game</title>
<link rel="stylesheet" type="text/css" href="game.css">
</head>
<body>
<canvas id="gameScreen" width="800" height="600">
</canvas>
<script src="game.js" type="text/javascript"></script>
<!-- <script src="paddle.js"></script> -->
</body>
</html>
