# Unexpected token 'export' when exporting scenes?

**URL:** <https://phaser.discourse.group/t/unexpected-token-export-when-exporting-scenes/14196>\
**Category:** Phaser 3\
**Created:** [April 10, 2024, 8:11pm UTC](https://phaser.discourse.group/t/unexpected-token-export-when-exporting-scenes/14196 "2024-04-10T20:11:35Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![TheBeardedGoblin](https://avatars.discourse-cdn.com/v4/letter/t/e9c0ed/32.png) [@TheBeardedGoblin](https://phaser.discourse.group/u/TheBeardedGoblin)\
**Post date:** [April 10, 2024, 8:11pm UTC](https://phaser.discourse.group/t/unexpected-token-export-when-exporting-scenes/14196/1 "2024-04-10T20:11:35Z")

</div>

Like [this developer](https://phaser.discourse.group/t/scene-created-as-class-error-cannot-use-import-statement-outside-a-module/9619), I was following along with [this post](https://www.patchesoft.com/phaser-3-title-screen-tutorial). Unfortunately, I got an error that says it doesn’t know what “export” means, and I don’t know how to fix it (though, it _does_ load the title scene). Additionally, I’m not sure how to call other JS files from each method of the class (example later). If someone has the time to help, I’d greatly appreciate it.

game.js

```javascript
import TitleScene from '/js/titleScene.js';
import GameScene from '/js/gameScene.js';

var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: [TitleScene, GameScene]
};

var game = new Phaser.Game(config);

```

titleScene.js

```javascript
class TitleScene extends Phaser.Scene {

	constructor() {
		super({ key: 'titleScene' });
	}

	preload = function () {
        this.load.image('background', 'assets/title/welcome.png');
    };

    create = function () {
        var bg = this.add.sprite(0, 0, 'background');
        bg.setOrigin(0, 0);

        var text = this.add.text(100, 100, 'Welcome to my game!');
        text.setInteractive({ useHandCursor: true });
        text.on('pointerdown', () => this.clickButton());
    };

    clickButton() {
        this.scene.switch('gameScene');
    }
}

export default TitleScene;

```

gameScene.js

```javascript
class GameScene extends Phaser.Scene {

	constructor() {
		super({ key: 'gameScene' });
	}

	// Is it possible to call other JS files from here?  
	// If I have "gameCreate.js", can I call that from the create() method below ?
	init() { };

	preload() { }

	create() { }

	update() { }

	end() { }

}

export default GameScene;

```

Script loading:

```javascript
<script src="~/js/phaser.js"></script>
<script src="~/js/preload.js"></script>
<script src="~/js/create.js"></script>
<script src="~/js/update.js"></script>
<script src="~/js/game.js"></script>
<script src="~/js/player.js"></script>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

```

Please forgive me if this is an asinine question, I’m not sure why the export isn’t working.

---

<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:22pm UTC](https://phaser.discourse.group/t/unexpected-token-export-when-exporting-scenes/14196/2 "2024-04-10T22:22:15Z")

</div>

For each script that includes `export`, **remove** the `<script>` for it. The imports should all go through `game.js`.

Also, final scene setup in the tutorial is more complicated than it needs to be. You can just use

```js
import TitleScene from './titleScene.js';
import GameScene from './gameScene.js';

var config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  scene: [TitleScene, GameScene]
};

var game = new Phaser.Game(config);

```

> [@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…

---

<div class="post-metadata">

**Author:** ![TheBeardedGoblin](https://avatars.discourse-cdn.com/v4/letter/t/e9c0ed/32.png) [@TheBeardedGoblin](https://phaser.discourse.group/u/TheBeardedGoblin)\
**Post date:** [April 11, 2024, 3:04am UTC](https://phaser.discourse.group/t/unexpected-token-export-when-exporting-scenes/14196/3 "2024-04-11T03:04:39Z")

</div>

I _think_ I understand the point of it, but it still breaks.

If I remove the two tags importing titleScene.js and gameScene.js, and add the “module” type to game.js

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

```

And my relative paths start with /

```javascript
import TitleScene from '/js/titleScene.js';
import GameScene from '/js/gameScene.js';

```

I get an “_Uncaught SyntaxError: Cannot use import statement outside a module_” message in the console.

I thought perhaps it was my paths, but those check out, and game.js is specified as being a module. Can you think of anything else that I might be doing wrong?

---

<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 11, 2024, 1:54pm UTC](https://phaser.discourse.group/t/unexpected-token-export-when-exporting-scenes/14196/4 "2024-04-11T13:54:27Z")

</div>

> [@TheBeardedGoblin](#):
>
> I get an “_Uncaught SyntaxError: Cannot use import statement outside a module_” message in the console.

Is this error definitely in `game.js`?

---

<div class="post-metadata">

**Author:** ![TheBeardedGoblin](https://avatars.discourse-cdn.com/v4/letter/t/e9c0ed/32.png) [@TheBeardedGoblin](https://phaser.discourse.group/u/TheBeardedGoblin)\
**Post date:** [April 11, 2024, 5:49pm UTC](https://phaser.discourse.group/t/unexpected-token-export-when-exporting-scenes/14196/6 "2024-04-11T17:49:46Z")

</div>

Definitely, it’s breaking as soon as it hits the first _import_ statement:

```javascript
import TitleScene from '/js/titleScene.js';

```

I updated each file above in my original post to reflect the current code.

---

<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 11, 2024, 6:08pm UTC](https://phaser.discourse.group/t/unexpected-token-export-when-exporting-scenes/14196/7 "2024-04-11T18:08:34Z")

</div>

Look at the HTML source in the browser with the error, verify it has

```html
<script type="module" src="~/js/game.js"></script>

```

and no other script for `game.js`.

---

<div class="post-metadata">

**Author:** ![TheBeardedGoblin](https://avatars.discourse-cdn.com/v4/letter/t/e9c0ed/32.png) [@TheBeardedGoblin](https://phaser.discourse.group/u/TheBeardedGoblin)\
**Post date:** [April 12, 2024, 3:33am UTC](https://phaser.discourse.group/t/unexpected-token-export-when-exporting-scenes/14196/8 "2024-04-12T03:33:40Z")

</div>

Very strange…I got it to work. **But** in order to do that, I had to make the code changes so that they were correct (_type=“module”_, etc), and then close down VS22, open it back up, and _then_ hit the page. For some reason, it wasn’t registering that I had made changes…which was apparent when I had an entire code block commented out in game.js, but it was still showing up in the Sources tab in the debugger in Chrome. Weird.

So now that I have titleScene.js loaded and working, it will call gameScene.js when that’s done. However, in the gameScene.js file, the functions in there are empty.

```javascript
class GameScene extends Phaser.Scene {

	constructor() {
		super({ key: 'gameScene' });
	}

	init() { };

	preload() { } // How do I get this preload to load up my /js/preload.js content?

	create() { }

	update() { }

	end() { }

}

export default GameScene;

```

How do I go about telling them to use content from other files. For example, previously I had game.js, which had:

```javascript
    scene: {
        preload: preload,
        create: create,
        update: update
    }

```

and each file (_preload.js, create.js, update.js_) would load for them. I’m not seeing how to do that in [Phaser.Scene - Phaser 3 API Documentation (beta)](https://newdocs.phaser.io/docs/3.80.0/Phaser.Scene).

Thank you for the awesome help so far.

---

<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 12, 2024, 3:51am UTC](https://phaser.discourse.group/t/unexpected-token-export-when-exporting-scenes/14196/9 "2024-04-12T03:51:15Z")

</div>

If you’re using scene classes, you give the class or an instance in the game config:

```javascript
scene: [TitleScene, GameScene]

```

And usually you would just move your preload code into GameScene’s `preload()` method. However, you could export and import that too.

```js
function preload () {/* … */}

export default preload;

```

```js
import preload from '/js/preload.js';

class GameScene extends Phaser.Scene {/* … */}

GameScene.prototype.preload = preload;

export default GameScene;

```

---

<div class="post-metadata">

**Author:** ![TheBeardedGoblin](https://avatars.discourse-cdn.com/v4/letter/t/e9c0ed/32.png) [@TheBeardedGoblin](https://phaser.discourse.group/u/TheBeardedGoblin)\
**Post date:** [April 12, 2024, 3:25pm UTC](https://phaser.discourse.group/t/unexpected-token-export-when-exporting-scenes/14196/10 "2024-04-12T15:25:43Z")

</div>

Interesting!

So in **game.js** , I added the imports and set the GameScene prototypes to what I was importing…

```javascript
import TitleScene from '/js/titleScene.js';
import GameScene from '/js/gameScene.js';
import preload from '/js/preload.js';
import create from '/js/create.js';
import update from '/js/update.js';

GameScene.prototype.preload = preload;
GameScene.prototype.create = create;
GameScene.prototype.update = update;

var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: [TitleScene, GameScene]
};

var game = new Phaser.Game(config);

```

Then have **gameScene.js** like this…

```javascript
class GameScene extends Phaser.Scene {

	constructor() {
		super({ key: 'gameScene' });
	}

	// Is it possible to call other JS files from here?  
	// If I have "gameCreate.js", can I call that from the create() method below ?
	init() { };

	preload() { }

	create() { }

	update() { }

	end() { }

}

export default GameScene;

```

And for example, **create.js** is like this:

```javascript
function create() {

    // Set world bounds
    this.physics.world.setBounds(0, 0, 800, 252);

    // Other stuff
}

export default create;

```

I end up getting two errors in the console:

 ![image](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/1/11d25943789250f2e6344047279f11718da560c9.png)

The first error with “unexpected token ‘export’” for the _export default xyz_ at the end of each file.

The other I assume has to do with **this** not meaning what I think it’s meaning, but I’m unsure of what to refer to when setting those world bounds.

---

<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 12, 2024, 4:22pm UTC](https://phaser.discourse.group/t/unexpected-token-export-when-exporting-scenes/14196/11 "2024-04-12T16:22:44Z")

</div>

> [@TheBeardedGoblin](#):
>
> ```javascript
> GameScene.prototype.preload = preload;
> GameScene.prototype.create = create;
> GameScene.prototype.update = update;
> 
> ```

I would do this in `gameScene.js`, if at all.

> [@TheBeardedGoblin](#):
>
> The first error with “unexpected token ‘export’” for the _export default xyz_ at the end of each file.

Probably you need to remove `<script>`s for those from the main document.

The second error is telling you that `this.physics` is undefined, probably because the scene has no Arcade Physics.

```js
class GameScene extends Phaser.Scene {
  constructor() {
    super({
      key: 'gameScene',
      physics: { arcade: {} }
    });
  }
}

```

---

<div class="post-metadata">

**Author:** ![TheBeardedGoblin](https://avatars.discourse-cdn.com/v4/letter/t/e9c0ed/32.png) [@TheBeardedGoblin](https://phaser.discourse.group/u/TheBeardedGoblin)\
**Post date:** [April 12, 2024, 8:51pm UTC](https://phaser.discourse.group/t/unexpected-token-export-when-exporting-scenes/14196/12 "2024-04-12T20:51:09Z")

</div>

Thank you. I’m really grateful for the help, but I feel like I’m just not understanding how to go about structuring everyything.

> I would do this in `gameScene.js`, if at all.

How else would you approach it? For example, I followed the tutorial and ended up with a structure like this:

- game.js
- 
  - preload.js

- 
  - create.js

- 
  - update.js

That was really easy, but I’m already hitting the point where it’s making it very messy, with a huge create.js file. What I’d like to do is restructure everything so that I can split that up into other files, I’m just not sure how Phaser does that.

- titleScene.js
- 
  - preload.js

- 
  - create.js

- 
  - update.js

- game.js
- 
  - preload.js

- 
  - create.js

- 
  - update.js

- 
  - (and other classes in their own .js file)

If this were your game, and you just wanted a title scene, a game scene, and maybe an end scene, how would you go about doing that and setting it up? I can’t seem to find any examples of this on the Explorer page or the Examples page.

---

<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 13, 2024, 2:09am UTC](https://phaser.discourse.group/t/unexpected-token-export-when-exporting-scenes/14196/13 "2024-04-13T02:09:19Z")

</div>

I mean that if you want to modify `GameScene.prototype`, it makes sense to do it in `gameScene.js`, where it’s being created and exported.

It’s a little unusual to split up a class into separate modules, but you can still do it. If the main scene methods get unruly people usually add helper methods:

```js
class GameScene extends Phaser.Scene {
  // …
  create() {
    this.createPlayer();
  }

  createPlayer() {
    /* … */
  }

  update() {
    this.updatePlayer();
  }

  updatePlayer() {
    /* … */
  }
}

```

See [the multiscene games in the official examples](https://github.com/phaserjs/examples/tree/master/public/src/games).

You can also modularize those functions, if you call them in the scene context:

```js
import createPlayer from './createPlayer.js';
import updatePlayer from './updatePlayer.js';

class GameScene extends Phaser.Scene {
  // …
  create() {
    createPlayer.call(this);
  }

  update() {
    updatePlayer.call(this);
  }
}

```

---

<div class="post-metadata">

**Author:** ![TheBeardedGoblin](https://avatars.discourse-cdn.com/v4/letter/t/e9c0ed/32.png) [@TheBeardedGoblin](https://phaser.discourse.group/u/TheBeardedGoblin)\
**Post date:** [April 15, 2024, 11:14pm UTC](https://phaser.discourse.group/t/unexpected-token-export-when-exporting-scenes/14196/14 "2024-04-15T23:14:13Z")

</div>

Ahh, that’s what I was trying to do! I don’t understand something though.

When I set up GameScene.js like this:

```javascript
import gamePreload from '/js/preload.js';
import gameCreate from '/js/create.js';
import gameUpdate from '/js/update.js';

class GameScene extends Phaser.Scene {

	constructor() {
		super({ key: 'gameScene' });
	}

	preload() {
		gamePreload.call(this);
	}

	create() {
		gameCreate.call(this);
	}

	update() {
		gameUpdate.call(this);
	}

	end() { }

}

export default GameScene;

```

And then load something like gameCreate.js like this:

```javascript

function gameCreate() {

    // Set world bounds
    this.physics.world.setBounds(0, 0, 800, 252);
}

```

It doesn’t understand what _world_ is. When I log _this_ to the console, it recognizes the scene (GameScene) but _this.physics_ comes back as undefined (which should be where Phaser.Physics.Arcade.World exists, right?).

---

<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 16, 2024, 12:39am UTC](https://phaser.discourse.group/t/unexpected-token-export-when-exporting-scenes/14196/15 "2024-04-16T00:39:06Z")

</div>

Arcade Physics needs to be enabled in the scene or game config.

```js
class GameScene extends Phaser.Scene {
  constructor() {
    super({
      key: 'gameScene',
      physics: { arcade: {} }
    });
  }
  // etc.
}

```

---

<div class="post-metadata">

**Author:** ![TheBeardedGoblin](https://avatars.discourse-cdn.com/v4/letter/t/e9c0ed/32.png) [@TheBeardedGoblin](https://phaser.discourse.group/u/TheBeardedGoblin)\
**Post date:** [April 16, 2024, 2:13am UTC](https://phaser.discourse.group/t/unexpected-token-export-when-exporting-scenes/14196/16 "2024-04-16T02:13:25Z")

</div>

Oooh, that makes sense!

Is there a way to persist something like the player through multiple functions then?

For example, if I declare my player and initialize my player in my create function, it’s undefined in the update function. But if we set the physics on the scene, why wouldn’t it recognize `physics.add.sprite`?

_gameScene.js_

```javascript
class GameScene extends Phaser.Scene {

	constructor() {
		super({
			key: 'gameScene',
			physics: {
			    default: 'arcade',
			    arcade: {
			        debug: false
			    }
			},
		});
	}

	preload() {
		gamePreload.call(this);
	}

	create() {
		gameCreate.call(this);
	}

	update() {
		gameUpdate.call(this);
	}
}

```

_gameCreate.js_

```javascript
function gameCreate() {
    var ship, asteroids, cursors, events;

    // Player
    player = this.physics.add.sprite(1000, 252, 'dude');

```

and then _gameUpdate.js_

```javascript
function gameUpdate() {
    // Camera follows player
    // Breaks on 'player.x', as player is undefined?
    scrollX = player.x - game.config.width / 2;
    this.cameras.main.scrollX = scrollX;
}

```

---

<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 16, 2024, 2:55am UTC](https://phaser.discourse.group/t/unexpected-token-export-when-exporting-scenes/14196/17 "2024-04-16T02:55:28Z")

</div>

Store it on the scene.

```js
this.player = this.physics.add.sprite(1000, 252, 'dude');

```

---

<div class="post-metadata">

**Author:** ![TheBeardedGoblin](https://avatars.discourse-cdn.com/v4/letter/t/e9c0ed/32.png) [@TheBeardedGoblin](https://phaser.discourse.group/u/TheBeardedGoblin)\
**Post date:** [April 16, 2024, 3:38pm UTC](https://phaser.discourse.group/t/unexpected-token-export-when-exporting-scenes/14196/18 "2024-04-16T15:38:49Z")

</div>

So if I store something in the scene(`this.player`) then I’ll need to refer to it everywhere else as a part of the scene (referencing `this.player` since that’s what we’re passing to each function), right?

What about things that we’ll later check inside of another function? For example, if I declare `this.cursors` in the scene and log it in the console in my gameCreate.js file, it logs fine. But if I try to log it inside of a `this.physics.add.overlap` in my gameCreate.js then it’s `undefined` (presumably because of `this` having a different scope).

Other than reassigning it before checking it (something like `var myCursors = this.cursors` and then referencing `myCursors` inside of the function), is there another way to deal with that?

---

<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 16, 2024, 3:59pm UTC](https://phaser.discourse.group/t/unexpected-token-export-when-exporting-scenes/14196/19 "2024-04-16T15:59:31Z")

</div>

Phaser functions that take a callback argument also take a calling context argument. In `overlap()` or `collider()`, it’s the fifth argument, and you can pass `this` there to keep the scene context.

Or you can pass an [arrow function expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) as the callback.

---

<div class="post-metadata">

**Author:** ![TheBeardedGoblin](https://avatars.discourse-cdn.com/v4/letter/t/e9c0ed/32.png) [@TheBeardedGoblin](https://phaser.discourse.group/u/TheBeardedGoblin)\
**Post date:** [April 16, 2024, 4:18pm UTC](https://phaser.discourse.group/t/unexpected-token-export-when-exporting-scenes/14196/20 "2024-04-16T16:18:47Z")

</div>

Ugh, I was looking right at it in the documentation too, I’m sorry I missed that! Thank you so much for your help, I’ve learned a lot!