React example code needs config

[gabeo14]

The sample code here:
https://github.com/proyecto26/ion-phaser/blob/master/react/README.md
is missing the phaser config on componentDidMount.

Adding this line:

componentDidMount() {
new Phaser.Game(this.state.game)
}

between the state and render function get it working.

Great project and good work!

[gabeo14]

just realized that this doesn't solve the config error I'm getting, but does get the phaser scene to actually display with the rotating hello world.

[jdnichollsc]

componentDidMount() {
new Phaser.Game(this.state.game)
}

Nope, you don't need that, the idea with this web component is initialize the game internally as you can see here => https://github.com/proyecto26/ion-phaser/blob/master/src/components/ion-phaser/ion-phaser.tsx#L60

[gabeo14]

OK I may have done something wrong then as the example react code wouldn't load without that. I'm also receiving an error in Chrome consol saying error : game config is needed or something along those lines. I'll post the full error when I'm back at my computer and also try restarting from scratch.

[jdnichollsc]

Let me know please, it would be awesome if you can share your code 👍

[gabeo14]

https://github.com/gabeo14/ion-phaser-react-test

Here's my repo for it as it is now. Feel free to take a look. I'll try to replicate that error tomorrow when I get a chance.

[jdnichollsc]

Remember: remove this new Phaser.Game(this.state.game)

[gabeo14]

So when I run it as localhost with that removed/ commented out I just get a white screen. When I inspect, this is what's in the body tag, along with a few script tags.

When it's present though, I get the phaser stuff displaying with the dark background and rotating text in the center.

The error that I have in the chrome console, regardless of the presence of that line is as follows.

Error: The configuration of the game is required
at IonPhaser.initializeGame (ion-phaser.entry.js:156)
at IonPhaser.componentWillLoad (ion-phaser.entry.js:209)
at ionphaser-c6124867.js:480
at step (ionphaser-c6124867.js:146)
at Object.next (ionphaser-c6124867.js:77)
at ionphaser-c6124867.js:49
at new Promise ()
at push.../node_modules/@ion-phaser/core/dist/esm/legacy/ionphaser-c6124867.js.__awaiter (ionphaser-c6124867.js:26)
at safeCall (ionphaser-c6124867.js:465)
at ionphaser-c6124867.js:522
at step (ionphaser-c6124867.js:146)
at Object.next (ionphaser-c6124867.js:77)
at ionphaser-c6124867.js:49
at new Promise ()
at push.../node_modules/@ion-phaser/core/dist/esm/legacy/ionphaser-c6124867.js.__awaiter (ionphaser-c6124867.js:26)
at scheduleUpdate (ionphaser-c6124867.js:506)
at ionphaser-c6124867.js:902
at step (ionphaser-c6124867.js:146)
at Object.next (ionphaser-c6124867.js:77)
at fulfilled (ionphaser-c6124867.js:29)
console. @ index.js:1375

Not sure if the two issues are related or not. I'll start over with a new react project and fresh install of ion-phaser-react and let you know if anything changes.

Edit: The html didn't display as an embedded code snippet, so I just edited to paste it normally

[gabeo14]

Just spun up a brand new project with ion-phaser/react and had the same result. It doesn't work until I add
componentDidMount() { new Phaser.Game(this.state.game) }

Same error present in chrome console as well.

[nagyv]

@jdnichollsc I have the same problem.

You can find my example repo at https://github.com/nagyv/ionphaser-react-demo

[jdnichollsc]

let me debug at night

[jdnichollsc]

I'm going to publish a new version, in the meantime can you download the repo and debug from demo-react folder? https://github.com/proyecto26/ion-phaser/blob/master/demo-react/
Please let me know

[jdnichollsc]

Try the last version 1.2.0 and let me know 👍

[gabeo14]

Try the last version 1.2.0 and let me know 👍

Just did and it's working. Thanks!

[jdnichollsc]

Awesome, sorry for the delay!