How to get Parcel to compile a Phaser game with 'classProperties'?

Question

I completed a Phaser game tutorial that ran fine when linking to the Phaser.js library on the Web using: <script src="//cdn.jsdelivr.net/npm/phaser@3.50.1/dist/phaser.js"></script>

But now when I try to use Phaser locally with npm, and Parcel to run the game I get the compile error: @parcel/transformer-js: This experimental syntax requires enabling the parser plugin: 'classProperties'

Which is caused by this type of code:

export default class Game extends Phaser.Scene
{
    /** @type {Phaser.Physics.Arcade.Sprite} */
    player;

I can't find anything on Google, except someone said to add the plugin to my package.json file, so now I have:

"dependencies": 
{
    "@babel/plugin-proposal-class-properties": "^7.13.0",
    "parcel": "^2.0.0-nightly.548",
    "phaser": "^3.53.1"
}

What else can I do to try fix this please?

score 0 · Answer 1 · answered Mar 19 '21 at 14:25

You need to add a .babelrc file in the root of your project containing the following code:

{
    "plugins": 
    [
      "@babel/plugin-proposal-class-properties"
    ]
}

Source: https://robkendal.co.uk/blog/2019-05-13-configure-parcel-js-and-babel-to-use-javascript-proposal-class-properties

How to get Parcel to compile a Phaser game with 'classProperties'?

1 Answers1