search

bberak / react-game-engine

A lightweight Game Engine for the web (React) 🕹⚡🎮
MIT License
413 stars 24 forks source link

Crash when navigating using React-Router-Dom <Link /> #3

Closed michaelcuneo closed 4 years ago

michaelcuneo commented 4 years ago

I've got a GameEngine instance set up on a page, but also need two other pages within the same app, for 'HELP, and a short questionnaire'. So I'm using React-Router-Dom to navigate...

It looks like when I navigate away, the GameEngine doesn't unmount correctly, and crashes the entire app.

Hitting a link throws the following.

index.js?3cec:417 Uncaught TypeError: Cannot read property 'end' of undefined
    at GameEngine.componentWillUnmount (index.js?3cec:417)
    at callComponentWillUnmountWithTimer (react-dom.development.js?61bb:17169)
    at HTMLUnknownElement.callCallback (react-dom.development.js?61bb:149)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?61bb:199)
    at invokeGuardedCallback (react-dom.development.js?61bb:256)
    at safelyCallComponentWillUnmount (react-dom.development.js?61bb:17176)
    at commitUnmount (react-dom.development.js?61bb:17553)
    at unmountHostComponents (react-dom.development.js?61bb:17873)
    at commitDeletion (react-dom.development.js?61bb:17904)
    at commitAllHostEffects (react-dom.development.js?61bb:18685)

I tried to get around the issue by adding a reference to the GameEngine, and running this.GameEngineRef.current.stop(); within componentWillUnmount();

But this does not fix anything.

bberak commented 4 years ago

Thanks for finding this bug @michaelcuneo. I've found the offending block:

  componentWillUnmount() {
    this.stop();
    this.timer.unsubscribe(this.updateHandler);
    if (this.touchProcessor.end) this.touchProcessor.end(); <-- I'll need to remove this line.
  }

You won't need to unmount and stop the game yourself, this will be done automatically. I can push a new version tonight after work - if you can wait till then?

michaelcuneo commented 4 years ago

Yeah, thanks, it's not a huge concern right now, just something I saw that I needed to work around at some point...

After using this for a few hours yesterday, I've found it to be extremely useful so I'll be using it for coming projects over the next few months I think.

So I'll continue to hack away at it, and throw up issues if I see any.

Damn nice project. Do you guys field usage questions if I pushed up a usage 'issue'?

bberak commented 4 years ago

Thanks @michaelcuneo - much appreciated. I'd love to see what you come up with.

Yep, more than happy to have a usage issue lying around - I'm sure others will find that useful.

Cheers!

bberak commented 4 years ago

Hey @michaelcuneo,

I just pushed react-game-engine@0.2.1 which fixes this issue.

Thanks for finding this one.

michaelcuneo commented 4 years ago

Nice! Works fine now. :+1: