Next.Js Redux Wrapper w/ Typescript - Implementation error, store does not exist as type

Question

I am implementing state management for React. I am using Next.js and Typescript.

I used the next redux wrapper and have the following on /pages/_app.js as instructed by the guide.

import React from "react";
import {createStore} from "redux";
import {Provider} from "react-redux";
import App, {Container} from "next/app";
import withRedux from "next-redux-wrapper";
import configureStore from '../state/store';

class MyApp extends App {

    static async getInitialProps ({Component, ctx}) {
        return {
          pageProps: (Component.getInitialProps ? await Component.getInitialProps(ctx) : {})
        }
      }

    render() {
        const {Component, pageProps, store} = this.props;
        return (
            <Container>
                <Provider store={store}>
                    <Component {...pageProps} />
                </Provider>
            </Container>
        );
    }

}

export default withRedux(configureStore)(MyApp);

I get a typescript error on the store variable I'm trying to declare in the render() function, which throws me an error as follows:

const store: any
Property 'store' does not exist on type 'Readonly<AppInitialProps & { Component: NextComponentType<NextPageContext, any, {}>; router: Router; }> & Readonly<{ children?: ReactNode; }>'.ts(2339)

I am unsure as to what the issue is. I am not able to access any type/interface to allow store to be a variable. And this is interesting because this is the solution for many developers when using Typescript/Redux/Next.js.

Any help/pointers would be appreciated, thank you.

TylerH · Accepted Answer · 2019-11-04 17:58:25Z

5

Container is deprecated now; use App instead and pass it props with Store. Setting something to 'any' because it's giving you errors is not a good solution and kind of defeats the whole purpose of using TypeScript in the first place.

import App, { AppContext } from 'next/app'
import { Provider } from 'react-redux'
import withRedux from 'next-redux-wrapper'
import { Store } from 'redux'
import Page from '../components/Page'
import { initializeStore } from '../store'

interface Props {
  store: Store;
}

class MyApp extends App<Props> {
  static async getInitialProps({ Component, ctx }: AppContext) {
    return {
      pageProps: (Component.getInitialProps 
        ? await Component.getInitialProps(ctx) 
        : {}),
    }
  }

  render() {
    const { Component, pageProps, store } = this.props

    return (
      <Provider store={store}>
        <Page>
          <Component {...pageProps} />
        </Page>
      </Provider>
    )
  }
}

export default withRedux(initializeStore)(MyApp)

edited Nov 4, 2019 at 17:58

TylerH

21.3k84 gold badges84 silver badges121 bronze badges

answered Nov 4, 2019 at 17:39

hello_luke

94713 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Illorian Over a year ago

But what should I do to get store in some page? NextPageContext does not have field store and I do not understand what type should I set to my page component (functional component)

BURGERFLIPPER101 · Accepted Answer · 2019-08-28 09:38:06Z

-2

Fixed the issue.

I added a simple

interface Props {
    store: any
}

To circumvent the Typescript error.

answered Aug 28, 2019 at 9:38

BURGERFLIPPER101

1,3724 gold badges30 silver badges44 bronze badges

1 Comment

Gibbo Over a year ago

This is not a fix. You may as well just remove Typescript if you're going to do this.

Collectives™ on Stack Overflow

Next.Js Redux Wrapper w/ Typescript - Implementation error, store does not exist as type

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related