MobX Stores are not Reactive in Next.js v9 when using Hooks

next.js / mobx bug report

Example name

with-mobx

Describe the bug

MobX stores are not reactive in Next.js v9 when using hooks

"mobx": "^5.11.0",
"mobx-react": "^6.1.1",
"next": "^9.0.1",
"react": "^16.8.6",

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Create a new next.js app - yarn create next-app
2. Add mobx and mobx-react
3. Create a simple store file and export default createContext(new Store())
4. In a function component const store = useContext(ImportedStore)
5. Display some items in a list from the store
6. Add a button that attempt to set the items to an empty array
7. No re-render is triggered

Sample Project

Download next-mobx.zip

Expected behavior

A re-render should have been triggered by MobX

Additional context

This bare bones example works fine when using create-react-app instead of create-next-app

PostsStore.js

import { createContext } from 'react'
import { action, decorate, observable } from 'mobx'

export class PostsStore {
  items = [
    'Foo',
    'Bar'
  ]

  reset() {
    this.items = ['Reset']
  }
}

decorate(PostsStore, {
  items: observable,
  reset: action
})

export default createContext(new PostsStore())

pages/index.js

import React, { useContext } from 'react'
import { observer } from 'mobx-react'
import PostsStore from '../stores/posts'

const Home = () => {
  const store = useContext(PostsStore)

  return (
    <div>
      {store.items.map(item => (<p key={item}>{item}</p>))}
      <p>
        {/* Clicking reset() DOES NOT trigger a re-render */}
        <button onClick={() => store.reset()}>Reset</button>
      </p>
    </div>
  )
}

export default observer(Home)

[danielkcz]

I don’t really see any benefit of your package against regular React Context. It’s kinda funny you actually want a donation for that 😄 Hard pass.

Besides, how is it related to this issue?

[danielkcz]

I don’t use classes at all, they are so messy 🙊 Decorators are just too weird or maybe I am weird, who knows 😃 Hooks forever! ✨