Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

TypeError: Cannot read property 'getState' of undefined

See original GitHub issue

Error:

TypeError: Cannot read property 'getState' of undefined
    at /home/leo/tiki_clone/tiki_fe/node_modules/react-redux/lib/components/Provider.js:31:18
    at Object.useMemo (/home/leo/tiki_clone/tiki_fe/node_modules/react-dom/cjs/react-dom-server.node.development.js:1582:19)
    at useMemo (/home/leo/tiki_clone/tiki_fe/node_modules/react/cjs/react.development.js:1532:21)
    at Provider (/home/leo/tiki_clone/tiki_fe/node_modules/react-redux/lib/components/Provider.js:30:42)
    at processChild (/home/leo/tiki_clone/tiki_fe/node_modules/react-dom/cjs/react-dom-server.node.development.js:3353:14)
    at resolve (/home/leo/tiki_clone/tiki_fe/node_modules/react-dom/cjs/react-dom-server.node.development.js:3270:5)
    at ReactDOMServerRenderer.render (/home/leo/tiki_clone/tiki_fe/node_modules/react-dom/cjs/react-dom-server.node.development.js:3753:22)
    at ReactDOMServerRenderer.read (/home/leo/tiki_clone/tiki_fe/node_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29)
    at renderToString (/home/leo/tiki_clone/tiki_fe/node_modules/react-dom/cjs/react-dom-server.node.development.js:4298:27)
    at Object.renderPage (/home/leo/tiki_clone/tiki_fe/node_modules/next/dist/next-server/server/render.js:53:851)
    at Function.getInitialProps (/home/leo/tiki_clone/tiki_fe/.next/server/pages/_document.js:293:19)
    at Function.getInitialProps (/home/leo/tiki_clone/tiki_fe/.next/server/pages/_document.js:883:85)
    at loadGetInitialProps (/home/leo/tiki_clone/tiki_fe/node_modules/next/dist/next-server/lib/utils.js:5:101)
    at renderToHTML (/home/leo/tiki_clone/tiki_fe/node_modules/next/dist/next-server/server/render.js:53:1142)
    at async /home/leo/tiki_clone/tiki_fe/node_modules/next/dist/next-server/server/next-server.js:99:97
    at async /home/leo/tiki_clone/tiki_fe/node_modules/next/dist/next-server/server/next-server.js:92:142

`_app.js`

import React, { Fragment, useEffect } from 'react';
import Head from 'next/head';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import homeReducer from '../src/reducers/home';
import { createWrapper } from 'next-redux-wrapper';

const makeStore = () => {
  return createStore(homeReducer);
};

function _App(props) {
  const { Component, pageProps, store } = props;

  return (
    <React.Fragment>
      <Head>
        <title>Tiki</title>
        <meta
          name='viewport'
          content='minimum-scale=1, initial-scale=1, width=device-width'
        />
      </Head>
      <Provider store={store}>
        <Component {...pageProps} />
      </Provider>
    </React.Fragment>
  );
}

_App.getInitialProps = async ({ Component, ctx }) => {
  const pageProps = Component.getInitialProps
    ? await Component.getInitialProps(ctx)
    : {};

  return { pageProps };
};

const wrapper = createWrapper(makeStore);

export default wrapper.withRedux(_App);

`reducers/home.js`

import { HYDRATE } from 'next-redux-wrapper';

const initialState = {};

const homeReducer = (state = { ...initialState }, action) => {
  switch (action.type) {
    case HYDRATE:
      return {
        bac: 'xc'
      };
    default:
      return {
        okk: 'noooo'
      };
  }
};

export default homeReducer;

`_document.js`

export default class _Document extends Document {
  static async getInitialProps(ctx) {
    const sheets = new ServerStyleSheets();
    const originalRenderPage = ctx.renderPage;

    const initialProps = await Document.getInitialProps(ctx);

    ctx.renderPage = () =>
      originalRenderPage({
        enhanceApp: (App) => (props) => sheets.collect(<App {...props} />)
      });

    return {
      ...initialProps,
      style: [
        ...React.Children.toArray(initialProps.styles),
        sheets.getStyleElement()
      ]
    };
  }

  render() {
    return (
      <Html>
        <Head>
          <link
            rel='stylesheet'
            type='text/css'
            href='http://localhost:3000/icons/flaticon.css'
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

Sorry about so many codes. However, I see it’s possible that error occurs in _document.js Thanks in advance!