Question

我的next.js redux应用程序在开发模式下运行非常出色，但是当我运行npm run build并在生产模式下启动该应用程序时，它会记录此错误；

{ Invariant Violation: Could not find "store" in the context of "Connect(Form(LoginForm))". Either wrap the root
component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(Form(LoginForm)) in connect options.

https://github.com/jankoboz/WeGhana-property

我删除了LoginForm，但是这次为RegisterForm抛出了同样的错误，这次我也与其他使用连接方法的组件一起抛出了相同的错误msg。

// createStore.js

import Immutable from 'immutable'
import thunkMiddleware from 'redux-thunk'
import { createLogger } from 'redux-logger'
import { createStore, applyMiddleware, compose } from 'redux'

import config from 'config'
import rootReducer from './reducers/index.js'

function createMiddlewares ({ isServer }) {
  let middlewares = [
    thunkMiddleware
  ]

  if (config.env === 'development' && typeof window !== 'undefined') {
    middlewares.push(createLogger({
      level: 'info',
      collapsed: true,
      stateTransformer: (state) => {
        let newState = {}

        for (let i of Object.keys(state)) {
          if (Immutable.Iterable.isIterable(state[i])) {
            newState[i] = state[i].toJS()
          } else {
            newState[i] = state[i]
          }
        }

        return newState
      }
    }))
  }

  return middlewares
}

function immutableChildren (obj) {
  let state = {}
  Object.keys(obj).forEach((key) => {
    state[key] = Immutable.fromJS(obj[key])
  })
  return state
}

export default (initialState = {}, context) => {
  let { isServer } = context
  let middlewares = createMiddlewares({ isServer })
  let state = immutableChildren(initialState)

  return createStore(
    rootReducer,
    state,
    compose(applyMiddleware(...middlewares))
  )
}

// _app.js
import withRedux from 'next-redux-wrapper'
import { withRouter } from 'next/router'
import { Provider } from 'react-redux'
import App, { Container } from 'next/app'
import { checkForPopup } from "./helpers/popup.js";
import createStore from './redux/createStore.js'

class MyApp extends App {
  static async getInitialProps ({ Component, ctx }) {
    return {
      pageProps: Component.getInitialProps
        ? await Component.getInitialProps(ctx)
        : {}
    }
  }
  render() {
    const { Component, pageProps, store, router } = this.props
    return (
      <Container>
        <Provider store={store}>
          <Component router={router} {...pageProps} />
        </Provider>
      </Container>
    );
  }
  componentDidMount() {
    checkForPopup();
  }
}

export default withRedux(createStore)(
  withRouter(MyApp)
)

Answer 1

基于@ wamba-kevin的评论，在生产环境中运行express时，请在启动脚本前加上NODE_ENV=production。我对next做了同样的事情，并且奏效了。

带有Redux的Next.js应用程序可以完美地用于开发，但不能用于生产

1 个答案: