Title: TypeError: Cannot destructure property ‘store’ of ‘t(…)’ as it is null. Error in React with Redux

Body:

I’m encountering an error in my React application when using Redux, specifically during the build process (npm run build). The application works correctly during development and when running the website, but fails to build with the following error:

TypeError: Cannot destructure property 'store' of 't(...)' as it is null.

Context:

I am using useSelector from react-redux to access the Redux store state within my React components. Here are the relevant code snippets:

store.ts:

import { legacy_createStore as createStore, combineReducers } from "redux";
import { reducerCounter } from "./reducer";

const rootReducer = combineReducers({
counter: reducerCounter,
});

export type RootState = ReturnType<typeof rootReducer>;

const store = createStore(rootReducer);

export default store;

reducer.ts:

const initialCounterState = { count: 0 };

export const reducerCounter = (state = initialCounterState, action: any) => {
switch (action.type) {
case "INC":
return { ...state, count: state.count + 1 };
case "DEC":
return { ...state, count: state.count - 1 };
case "RES":
return { ...state, count: 0 };
default:
return state;
}
};

page.tsx:

"use client";
import { Provider } from "react-redux";
import Counter from "./Counter/page";
import store from "./Context/store";

const Home = () => {
if (!store) {
return <div>Loading...</div>;
}
return (
<Provider store={store}>
<Counter />
</Provider>
);
};

export default Home;

Counter.tsx:

"use client";
import React from "react";
import { useDispatch, useSelector } from "react-redux";

interface CounterState {
count: number;
}

function Counter() {
const { count }: CounterState = useSelector((state: any) => state.counter);
const dispatchCounter = useDispatch();

return (
<div>
<div>Counter: {count}</div>
<div>
<div onClick={() => dispatchCounter({ type: "INC" })}>INCREMENT</div>
<div onClick={() => dispatchCounter({ type: "DEC" })}>DECREMENT</div>
<div onClick={() => dispatchCounter({ type: "RES" })}>RESET</div>
</div>
</div>
);
}

export default Counter;

Error Details:
The error message during the build process is as follows:

Error occurred prerendering page "/Counter". Read more: https://nextjs.org/docs/messages/prerender-error

TypeError: Cannot destructure property 'store' of 't(...)' as it is null.
at r (C:...\Tic-Tac-Toe-with-AI.next\server\chunks\842.js:9:1356)
at i (C:...\Tic-Tac-Toe-with-AI.next\server\app\Counter\page.js:1:2879)
at nj (C:...\next\dist\compiled\next-server\app-page.runtime.prod.js:12:46251)
at nM (C:...\next\dist\compiled\next-server\app-page.runtime.prod.js:12:47571)
...

Environment:

{   "next": "^14.2.1",   "react": "^18",   "react-redux": "^9.1.2",   "redux": "^5.0.1" }

Questions:

Are there any specific configurations or settings in Next.js that I need to adjust to resolve this issue?