Next.js: mobX with next beta 19

[knipferrc]

For some reason if I upgrade to beta 19 of next I get an error about the mobx store not being available. I'm using a provider and then injected the store into my components. Anyone else using mobx with next getting this error when upgrading?

[fridays]

I get the same error:

Error: MobX observer: Store 'state' is not available! Make sure it is provided by some Provider
    at http://localhost:3000/_next/-/commons.js:46588:46
    at Array.forEach (native)
    at http://localhost:3000/_next/-/commons.js:46585:17
    at _fn.render (http://localhost:3000/_next/-/commons.js:46564:31)
    at _fn.withHandleError (http://localhost:3000/_next/-/main.js:4278:17)
    at _fn [as render] (http://localhost:3000/_next/-/main.js:4308:24)
    at http://localhost:3000/_next/-/commons.js:35584:21
    at measureLifeCyclePerf (http://localhost:3000/_next/-/commons.js:34863:12)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (http://localhost:3000/_next/-/commons.js:35583:25)
    at ReactCompositeComponentWrapper._renderValidatedComponent (http://localhost:3000/_next/-/commons.js:35610:32)

This worked before:

import React from 'react'
import {Provider, inject, observer, useStaticRendering} from 'mobx-react'
import State from './state'

useStaticRendering(!process.browser)


let clientState = null

const getState = initialState => {
  if (process.browser) {
    return clientState || (clientState = new State(initialState))
  } else {
    return initialState || new State()
  }
}


export const withState = Component => {
  return inject('state')(observer(Component))
}


export const withStateProvider = Component => {
  Component = withState(Component)

  return class StateProvider extends React.Component {

    static async getInitialProps(ctx) {
      const initialState = ctx.state = getState()
      const props = await Component.getInitialProps(ctx)
      return {initialState, ...props}
    }

    constructor(props) {
      super(props)
      this.initialState = getState(props.initialState)
    }

    render() {
      const {initialState, ...initialProps} = this.props

      return (
        <Provider state={this.initialState}>
          <Component {...initialProps} />
        </Provider>
      )
    }
  }
}

pages/index.js

import {withStateProvider} from '../client/with-state'

@withStateProvider
export default class IndexPage extends React.Component {

  static async getInitialProps({state}) {
    state.title = `Homepage - ${state.app.title}`
  }

  render() {
    const {state} = this.props

    return (
      <div>
        {state.title}
      </div>
    )
  }
}

[knipferrc]

Yep I am getting the exact same thing. If I revert to beta 18 all is well.

[chrisportela]

Some more information. I checked the context of the component I'm injecting and it does see the mobxStores. The stores do show up properly on the server side in my case. However the injector sees no stores when it tries to load it up on the client side.

[vuldin]

This issue remains in beta 20.

[sakulstra]

i just wanted to confirm this issue: for me it even occurs when running the official https://github.com/zeit/next.js/blob/master/examples/with-mobx/components/Page.js demo with .19 and .20

[Zaiban]

I'm not using MobX, but I suspect that the error I'm having might be related. Beta 19 or higher gives me
TypeError: Cannot read property 'position' of undefined
I'm using other libraries which use providers, namely Redux, Styletron and I18Next. So maybe the error has something to do with React Context which is commonly used by providers.

[7elven]

How to fix this error?

[knipferrc]

I just tried this again with the latest beta.22 and the problem is there still. The app loads for a second but then throws the error.

[Zaiban]

After more research it seems that my problem might be unrelated, thou the common point still stands that it starts from beta 19. My error only shows up when Redux DevTools are installed and DevTools.instrument() is called on the middleware.

[mingfang]

This problem is also in beta.24.
For me the problem only happens in dev mode but not in prod mode.

[mingfang]

The problem went away after I disable the React Developer Tool.

sorry this is not true. I've been trying different combinations and got confused.
The problem remains even without the React Dev Tool.

[chrisportela]

Is that enabled by default? I didn't enable that
On Tue, Feb 7, 2017 at 20:03 Ming Fang [e-mail] wrote:

The problem went away after I disable the React Developer Tool.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/zeit/next.js/issues/899#issuecomment-278196517, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AAe3MXKKbP5JQyX53Js1mnYXEToWK8NPks5raRRxgaJpZM4LvzSd
.

[sakulstra]

@arunoda don't know if you are already working on this? I gave it a brief look as it's kind of sad to stick on beta-18 :) and could pinpoint it to https://github.com/zeit/next.js/compare/2.0.0-beta.18...2.0.0-beta.19#diff-bb2506ef56bf4dcd5dc9d4ab106d2460 <- when reverting this file things seem to work fine again. I'd be glad if someone looks into it as I don't know anything about the monkeypatching there

[arunoda]

I think we need to do something about this.

[7elven]

I still get Error..
when i download zip and start example with mobx

[vuldin]

People have been working on this issue as mentioned in the most recent comments. There is a pull request that supposedly fixes this issue, which is also mentioned in previous comments. I have no idea regarding time frame, but I'm sure it will be merged at some point. If you 'need' the fix now and can't wait for a merge, then I imagine you could try the pull request repo.

[7elven]

@vuldin I'm sorry I don't know i'm newbie. I only see 3 day ago and test it
sorry for my comment

[qweqweq]

@sakulstra i try it myself ,and i find the error has gone. nextjs version is 2.4