Using MobX

[will-stone]

Hi. Currently making a terminal game and Ink has been great fun for this. I'm jumping around a few state management solutions, seeing which feels the best. I'm currently at MobX and whilst it's great at separating the game engine from the view, it doesn't seem to play nice with Ink due to an apparent hard dependency on react-dom. This is the error I get when wrapping a component in an observer:

Has anyone had any luck with matching-up ink v3, mobx v6, and mobx-react-lite v3?

[will-stone]

Okay, I think I've found the solution by importing and typing the observer function manually. So instead of this:

// Doesn't work and throws an error about missing `react-dom` module
import { observer } from 'mobx-react-lite'

Do this:

import { observer as distObserver } from 'mobx-react-lite/dist/observer'
// @ts-expect-error workaround as mobx-react is expecting react-dom
import { observer as libraryObserver } from 'mobx-react-lite/lib/observer'

type Observer = typeof distObserver

export const observer: Observer = libraryObserver

You can then wrap components in observer as normal.

const App: React.FC<{ game: Game }> = observer(({ game }) => {
  ...
})