Why does the console say "Cannot use import statement outside a module" when I import a class, which is a module? [duplicate]

So, I created two script files, one for export and one for import.

Export

// Mario's Test Studio
const canvas = document.querySelector('canvas');
const c = canvas.getContext('2d');
canvas.width = innerWidth;
canvas.height = innerHeight;
export default class Mario {
    constructor() {
        this.height = 20;
        this.width = 20;
        this.position = {
            x: 0,
            y: canvas.height - this.height
        };
        this.velocity = {
            x: 0
        }
        this.shift = false;
        this.right = false;
        this.left = false;
    }
    draw() {
        addEventListener('keyup', ({keyCode}) => {
            switch (keyCode) {
                case 39:
                    this.right = false;
                    break;
                case 37: 
                    this.left = false;
                    break;
            }
            switch (keyCode) {
                case 16:
                    this.shift = false;
                    break;
            }
        });
        addEventListener('keydown', ({keyCode}) => {
            switch (keyCode) {
                case 39:
                    this.right = true;
                    break;
                case 37: 
                    this.left = true;
                    break;
            }
            switch (keyCode) {
                case 16: 
                    this.shift = true;
                    break;
            }
        });
        this.position.x += this.velocity.x;
        c.fillStyle = 'red';
        c.fillRect(this.position.x, this.position.y, this.width, this.height);
        if (this.right == true && this.shift == true) {
            if (this.velocity.x < 2 && this.position.x + this.width + this.velocity.x <= canvas.width) {
                this.velocity.x += 0.25;
                console.log(this.velocity.x);
            }else if(this.position.x + this.width + this.velocity.x >= canvas.width) {
                this.velocity.x = 0;
                console.log(this.velocity.x);
            }
        }else if(this.left == true && this.shift == true) {
            if (this.velocity.x > -2 && this.position.x + this.velocity.x >= 0) {
                this.velocity.x -= 0.25;
                console.log(this.velocity.x);
            }else if(this.position.x + this.velocity.x <= 0) {
                this.velocity.x = 0;
                console.log(this.velocity.x);
            }
        }else if(this.right == true && this.shift == false) {
            if (this.velocity.x < 1.5 && this.position.x + this.width + this.velocity.x <= canvas.width) {
                this.velocity.x += 0.25;
                console.log(this.velocity.x);
            }else if(this.velocity.x > 1.5 && this.position.x + this.width + this.velocity.x <= canvas.width) {
                this.velocity.x -= 0.25;
                console.log(this.velocity.x);
            }else if(this.position.x + this.width + this.velocity.x >= canvas.width) {
                this.velocity.x = 0;
                console.log(this.velocity.x);
            }
        }else if(this.left == true && this.shift == false) {
            if (this.velocity.x > -1.5 && this.position.x + this.velocity.x >= 0) {
                this.velocity.x -= 0.25;
                console.log(this.velocity.x);
            }else if(this.velocity.x < -1.5 && this.position.x + this.velocity.x >= 0) {
                this.velocity.x += 0.25;
                console.log(this.velocity.x);
            }else if(this.position.x + this.velocity.x <= 0) {
                this.velocity.x = 0;
                console.log(this.velocity.x);
            }
        }else{
            if (this.velocity.x < 0) {
                this.velocity.x += 0.25;
                console.log(this.velocity.x);
            }else if(this.velocity.x > 0) {
                this.velocity.x -= 0.25;
                console.log(this.velocity.x);
            }
        }
    }
}
const mario = new Mario();
const animate = () => {
    requestAnimationFrame(animate);
    c.clearRect(0, 0, canvas.width, canvas.height);
    mario.draw();
}
animate();

Import

import class Mario from './mario.js';
const canvas = document.querySelector('canvas');
const c = canvas.getContext('2d');
canvas.width = innerWidth;
canvas.height = innerHeight;
const mario = new Mario();
const animate = () => {
    requestAnimationFrame(animate);
    c.clearRect(0, 0, canvas.width, canvas.height);
    mario.draw();
};
animate();

I tried to write "import Mario from './mario.js'", "import {class Mario from './mario.js'}", and "import {class Mario from 'Spritesheets /* Folder where I saved my file */'}." All of these got the same result: "Cannot use import statement outside a module."

So, I fixed that issue, but I got a new issue after I used script type module: according to the console, my script was blocked because of cross-origin. How do you fix that?

<canvas></canvas>
<style>
    * {
        margin: 0px !important;
    }
</style>
<script src="super-mario-bros.js" type="module"></script>

Via Active questions tagged javascript - Stack Overflow https://ift.tt/PbESJXo