При билде Next.js возвращается ошибка TypeError: Cannot destructure property 'store' of 'useReduxContext2(...)' as it is null

Question

Пишу приложение на Next.js React подключаю Redux Tollkit. Подключила сторе при запуске все работает нет ошибок. Но при сборке выпадает ошибка TypeError: Cannot destructure property 'store' of 'useReduxContext2(...)' as it is null..

вот layout.tsx

import type { Metadata } from "next";
import "./styles/index.scss";
import LayoutWrapper from "@/widgets/LayoutWrapper/ui/LayoutWrapper";
import StoreProvider from "./StoreProvider";
import { ToastContainer } from "react-toastify";

export const metadata: Metadata = {
    title: "Create Next App",
    description: "Generated by create next app",
};

export default function RootLayout({
    children,
}: Readonly<{
    children: React.ReactNode;
}>) {
  return (
    <html lang="en">
        <body>
            <StoreProvider>
                <LayoutWrapper>
                    {children}
                    <ToastContainer
                        position="top-right"
                        autoClose={5000}
                        hideProgressBar={false}
                        newestOnTop={false}
                        closeOnClick
                        pauseOnFocusLoss
                        draggable
                        pauseOnHover
                    />
                </LayoutWrapper>
            </StoreProvider>
        </body>
    </html>
  );
}

вот StoreProvider.tsx

'use client'
import { AppStore, makeStore } from '@/shared/libs/store/store'
import { useRef } from 'react'
import { Provider } from 'react-redux'

export default function StoreProvider({
    children
}: {
    children: React.ReactNode
}) {
    const storeRef = useRef<AppStore | null>(null)
    if (!storeRef.current) {
        storeRef.current = makeStore()
    }

return <Provider store={storeRef.current}>{children}</Provider>
}

и сам makeStore

import { addressReducer } from '@/entities/Address';
import { bankReducer, requisiteReducer } from '@/entities/Bank';
import { cityReducer } from '@/entities/City';
import { countryReducer } from '@/entities/Country';
import { organizationReducer } from '@/entities/Organization';
import { userReducer } from '@/entities/User';
import { profileReducer } from '@/entities/User/model/slice/profileSlice';
import { authReducer } from '@/features/auth/model/slice/authSlice'
import { $api } from '@/shared/api/api';
import { rtkApi } from '@/shared/api/rtkApi'
import { configureStore } from '@reduxjs/toolkit'
import { AxiosInstance } from 'axios';

export interface ThunkExtraArg {
    api: AxiosInstance;
}

export const makeStore = () => {
    const extraArg: ThunkExtraArg = {
        api: $api,
    };
    return configureStore({
        reducer: {
            auth: authReducer,
            user: userReducer,
            profile: profileReducer,
            organization: organizationReducer,
            country: countryReducer,
            city: cityReducer,
            bank: bankReducer,
            address: addressReducer,
            requisite: requisiteReducer,
            [rtkApi.reducerPath]: rtkApi.reducer,
        },
        middleware: (getDefaultMiddleware) => getDefaultMiddleware({
            thunk: {
                extraArgument: extraArg,
            },
        }).concat(rtkApi.middleware),
    })
}

export type AppStore = ReturnType<typeof makeStore>
export type RootState = ReturnType<AppStore['getState']>
export type AppDispatch = AppStore['dispatch']

export interface ThunkConfig<T> {
    rejectValue: T;
    extra: ThunkExtraArg;
    state: RootState;
}

как нужно подключать Redux взяла из документации https://redux.js.org/usage/nextjs Почему появляется ошибка и как ее исправить? Как вообще правильно тогда подключать redux?

БЛОГ НА HUSL

При билде Next.js возвращается ошибка TypeError: Cannot destructure property 'store' of 'useReduxContext2(...)' as it is null

Ответы (0 шт):