# Scene created as class error: Cannot use import statement outside a module

**URL:** <https://phaser.discourse.group/t/scene-created-as-class-error-cannot-use-import-statement-outside-a-module/9619>\
**Category:** Phaser 3\
**Created:** [May 18, 2021, 3:03pm UTC](https://phaser.discourse.group/t/scene-created-as-class-error-cannot-use-import-statement-outside-a-module/9619 "2021-05-18T15:03:20Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![YanKleber](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/yankleber/32/5152_2.png) [@YanKleber](https://phaser.discourse.group/u/YanKleber)\
**Post date:** [May 18, 2021, 3:03pm UTC](https://phaser.discourse.group/t/scene-created-as-class-error-cannot-use-import-statement-outside-a-module/9619/1 "2021-05-18T15:03:21Z")

</div>

I am struggling with scenes. I found [this](https://www.patchesoft.com/phaser-3-title-screen-tutorial) scene tutorial which supposed to teach how to create every scene as a class, however when I tried to implement it I got the error:

**Uncaught SyntaxError: Cannot use import statement outside a module**

This is my code…

**HTML:**  
\< html\>  
\< head\>  
\< script src=“lib/phaser.min.js”\>  
\< script src=“Game.js”\>  
\< /head\>  
\< body\>  
\< /body\>  
\< /html\>

**Game.JS:**  
import StartScene from “StartScene.js”;

```
var startScene = new StartScene();

var config = {
  type: Phaser.AUTO,
  width: 1024,
  height: 768,
};
var game = new Phaser.Game(config);

game.scene.add("startScene", startScene);
game.scene.start('startScene');

```

**StartScene.JS**  
class StartScene extends Phaser.Scene {

```
    constructor () {
        super({key: "startScene"});
    }
    
    init() {
    }
    
    preload() {
    }
    
    create() {
    }
    
    update() {
    }
}

export default StartScene;

```

Any idea of what am I doing wrong?

Thanks!

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [May 18, 2021, 3:27pm UTC](https://phaser.discourse.group/t/scene-created-as-class-error-cannot-use-import-statement-outside-a-module/9619/2 "2021-05-18T15:27:04Z")

</div>

Change to

```javascript
<script type="module" src="Game.js"></script>

```

And imports like

```javascript
import StartScene from "./StartScene.js";

```

---

<div class="post-metadata">

**Author:** ![YanKleber](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/yankleber/32/5152_2.png) [@YanKleber](https://phaser.discourse.group/u/YanKleber)\
**Post date:** [May 18, 2021, 4:11pm UTC](https://phaser.discourse.group/t/scene-created-as-class-error-cannot-use-import-statement-outside-a-module/9619/3 "2021-05-18T16:11:01Z")

</div>

Thank you very much, **Samme**! It definetively did the trick!

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [April 10, 2024, 10:23pm UTC](https://phaser.discourse.group/t/scene-created-as-class-error-cannot-use-import-statement-outside-a-module/9619/4 "2024-04-10T22:23:38Z")

</div>

> [@Phaser 3 with modules](https://phaser.discourse.group/t/phaser-3-with-modules/13950):
>
> You need only 1 module script in the HTML document, e.g., main.js. That’s the top-level module. That script can import any other modules it needs. \<script src="main.js" type="module"\>\</script\> If you don’t mark this script as a module, you’ll see an error similar to Uncaught SyntaxError: import declarations may only appear at top level of a module In the browser, module specifiers are URLs (unless you use [import maps](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#importing_modules_using_import_maps)). Relative URLs must start with / or ./ or ../. import { Game } from "ht…