[vercel/next.js]mobX 与下一个 beta 19

我犯了同样的错误：

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)

这之前有效：

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>
      )
    }
  }
}

页面/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>
    )
  }
}

是的，我得到了完全相同的东西。如果我恢复到 beta 18 一切都很好。

更多信息。我检查了我正在注入的组件的上下文，它确实看到了 mobxStores。在我的例子中，商店确实在服务器端正确显示。然而，当注入器尝试在客户端加载它时，它看不到任何存储。

此问题仍保留在 beta 20 中。

我只是想确认这个问题：对我来说，甚至在使用.19运行官方https://github.com/zeit/next.js/blob/master/examples/with-mobx/components/Page.js演示时也会发生这种情况和.20

我没有使用 MobX，但我怀疑我遇到的错误可能与之相关。 Beta 19 或更高版本让我 TypeError: Cannot read property 'position' of undefined 可以使用其他使用提供程序的库，即 Redux、Styletron 和 I18Next。所以这个错误可能与提供商常用的 React Context 有关。

如何修复这个错误？

我刚刚用最新的 beta.22 再次尝试，问题仍然存在。应用程序加载一秒钟，但随后抛出错误。

经过更多研究，似乎我的问题可能无关，但共同点仍然是从 beta 19 开始。我的错误仅在安装 Redux DevTools 并在中间件上调用 DevTools.instrument() 时出现。

beta.24 中也存在这个问题。对我来说，问题只发生在开发模式下，但不会发生在生产模式下。

在我禁用 React Developer Tool 后，问题就消失了。

抱歉，这不是真的。我一直在尝试不同的组合并感到困惑。即使没有 React Dev Tool，问题仍然存在。

默认情况下启用吗？我没有启用该功能，Ming Fang notification@github.com于 2017 年 2 月 7 日星期二 20:03写道：

在我禁用 React Developer Tool 后，问题就消失了。

— 您收到此消息是因为您发表了评论。直接回复此电子邮件，在 GitHub 上查看 https://github.com/zeit/next.js/issues/899#issuecomment-278196517，或将线程静音 https://github.com/notifications/unsubscribe-auth/ AAe3MXKKbP5JQyX53Js1mnYXEToWK8NPks5raRRxgaJpZM4LvzSd 。

@arunoda 不知道你是否已经在做这件事了？我简单地看了一下，因为坚持 beta-18 有点令人难过:)并且可以将其精确定位到https://github.com/zeit/next.js/compare/2.0.0-beta.18... 2.0.0-beta.19#diff-bb2506ef56bf4dcd5dc9d4ab106d2460 <- 恢复此文件时，一切似乎再次正常工作。如果有人调查它，我会很高兴，因为我对那里的猴子补丁一无所知

我认为我们需要对此做点什么。

当我下载 zip 并使用 mobx 启动示例时，我仍然收到错误消息

正如最近的评论中提到的，人们一直在研究这个问题。有一个拉取请求据说可以解决这个问题，这在之前的评论中也提到过。我不知道时间框架，但我确信它会在某个时候合并。如果您现在“需要”修复并且等不及合并，那么我想您可以尝试拉取请求存储库。

@vuldin，很抱歉我不知道我是新手。我三天前才看到并测试过，抱歉我的评论

@sakulstra我自己尝试了一下，发现错误已经消失了。 nextjs版本是2.4