Cannot destructure property 'store' of 'useReduxContext(...)' as it is null

Question

Im using NextJs 13 and redux toolkit.

When i try the npm run build command, i get this error: Cannot destructure property 'store' of 'useReduxContext(...)' as it is null.

I think this has something to do with useAppSelector, am i getting the state right?

This is the page component:

"use client";

import React from "react";
import { useAppSelector } from "../../redux/hooks";

export default function HomePage() {
  const user = useAppSelector((state) => state.user);

  return (
    <div>
      <h1>Test</h1>
    </div>
  );
}

This is the store.ts file:

import { configureStore } from '@reduxjs/toolkit'
import { userSlice } from './reducers/reducers';

export const store = configureStore({
  reducer: {
    user: userSlice.reducer,
  },
})

export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch

This is the hooks.ts file:

import { useDispatch, useSelector } from 'react-redux'
import type { TypedUseSelectorHook } from 'react-redux'
import type { RootState, AppDispatch } from './store'

export const useAppDispatch: () => AppDispatch = useDispatch
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

And this is the reducers.ts file:

import { RootState } from "./../store";
import { PayloadAction } from "@reduxjs/toolkit";
import { createSlice } from "@reduxjs/toolkit";

export interface userPayload {
  id: number,
  guest: boolean,
  username: string,
  email: string,
  income: number,
  limit: number,
}

const initialUserState = {
  id: 0,
  guest: false,
  username: "",
  email: "",
  income: 0,
  limit: 0,
};

export const userSlice = createSlice({
  name: "user",
  initialState: initialUserState,
  reducers: {
    inputData: (state, action: PayloadAction<userPayload>) => {
      (state.income = action.payload.income), (state.limit = action.payload.limit);
    },
    inputAuth: (state, action: PayloadAction<userPayload>) => {
      (state.id = action.payload.id),
        (state.guest = action.payload.guest),
        (state.username = action.payload.username),
        (state.email = action.payload.email);
    },
  },
  
});

export const { inputData, inputAuth } = userSlice.actions

export const selectCount = (state: RootState) => state.user

export default userSlice.reducer

Woolfolk

In the hooks.ts file try not to import the types, but the classes. Like import { TypedUseSelectorHook } from 'react-redux' and the same for the imports from store.ts – Routh

I don't see anywhere in the code provided where you setup your store and redux Provider. If these are missing it would explain your error. – Shuddering

Answer 1

I had the same issue, my friend. Move the store provider into the pages/_app.js file (Instead of the pages/index.js file), and it should work. Here is what I did:

import { Provider } from 'react-redux';
import '../assert/css/master.scss';
import store from '../store/store';

export default function App({ Component, pageProps }) {
  return (
    <Provider store={store}>
      <Component {...pageProps} />
    </Provider>
  );
}

Delivery

This is exactly what i did. Brian commented the solution already, but i'm marking this as correct. Thanks. – Woolfolk

Answer 2

I ran into the errors when deploying an application to KUBERNETES using DOCKERFILE:

• TypeError: Cannot destructure property 'store' of 'useReduxContext(...)' as it is null.
• TypeError: (0 , g.useAppDispatch) is not a function
• and so on.

(NEXT 13, Redux ToolKit, Dockerfile and FSD were used)

In my case, I used Feature Sliced Disign and I had two PAGES folders: inside and outside the SRC folder.

The problem was solved after renaming the SRC/PAGES folder to something else (in my case SRC/WINDOWS).

error logs

folders before fix

folders after fix

Fording

You saved my day. Just love you. God bless you. – Cony

Answer 3

I had the same problem. To solve this I simply renamed the folder that named the pages in my project

Jephthah

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Bodi

Answer 4

I had the same issue. In my case I use Next js APP router and got this error. I forgot to declare the "use client" above component. and I try to access a value from a store.

• declare a "use client"

Descendent

Answer 5

I also encountered the same issue with the Next-JS 13+ App router. My mistake was I had declared the routes on app folder same time I had a folder called pages inside src "src/pages/*" folder to declare page components I was simply importing the component to app/page.ts and exporting it while next js build there is a process called generate static pages it will compile "src/pages/*" these components considered as a next page route and compiled as server component so caused the build error. I had fixed the issue by simply renaming the "src/pages/*" to "src/page-components/*".

Solution: Rename "src/pages/*" or "pages/*" to "src/<something-except-pages>/*"

Albi