# Phaser 3 with modules

**URL:** <https://phaser.discourse.group/t/phaser-3-with-modules/13950>\
**Category:** Examples\
**Created:** [February 4, 2024, 9:56pm UTC](https://phaser.discourse.group/t/phaser-3-with-modules/13950 "2024-02-04T21:56:11Z")\
**Posts on this page:** 1\
**Page:** 1

<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:** [February 4, 2024, 9:56pm UTC](https://phaser.discourse.group/t/phaser-3-with-modules/13950/1 "2024-02-04T21:56:11Z")

</div>

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.

```html
<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 `../`.

```js
import { Game } from "https://cdn.jsdelivr.net/npm/phaser@3.70.0/dist/phaser.esm.js";

import { gameConfig } from "./gameConfig.js";

```

## Phaser global with modules

> <https://gist.github.com/samme/c1006080b0cc37c7a563452c61fa6ca3>

## Phaser ESM with modules (since v3.60; experimental)

> <https://gist.github.com/samme/88a13b20b997a9b3fa75db750b4e555f>
>
> There are more than three files. show original