0

Столкнулся с проблемой, что при использовании nextjs 13.1.5 в связке redux 4.2.0 появляется ошибка "TypeError: (0 , _react.createContext) is not a function"

введите сюда описание изображения

Подключение provider в _app.tsx (Решил использовать nextjs ее новую архитектуру с директорий app)

import type { AppProps } from 'next/app'
import {Provider} from "react-redux";
import {store, wrapper} from "@/redux/store";

function App({ Component, pageProps }: AppProps) {
    return (
        <Provider store={store}>
           <Component {...pageProps} />
        </Provider>
    )
}

export default wrapper.withRedux(App)

Сам файлик store.ts выглядит вот так

import {Action} from "redux";
import { createWrapper } from "next-redux-wrapper";

import {ThunkAction} from "redux-thunk";
import {configureStore} from "@reduxjs/toolkit";
import {authReducer} from "@/redux/slices/auth";


export function makeStore() {
    return configureStore({
        reducer: {
            auth: authReducer
        }
    })
}

export const store = makeStore()

export type RootStore = ReturnType<typeof makeStore>
export type RootState = ReturnType<RootStore['getState']>
export type AppDispatch = typeof store.dispatch
export type AppThunk<ReturnType = void> = ThunkAction<ReturnType, RootStore, unknown,     Action<string>>

export const wrapper = createWrapper<RootStore>(makeStore)

Слайсер для auth.ts

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

interface user {
    id: number,
    email: string,
    name: string
}

export interface Auth {
    data: user|null
}

const initialState: Auth = {
    data: null
}

export const authSlice = createSlice({
    name: 'auth',
    initialState,
    reducers: {
        setAuthData: (state, action:PayloadAction<user>) => {
            state.data = action.payload
        }
    }
})

export const {setAuthData} = authSlice.actions

export const selectAuthData = (state: RootState) => state.auth.data

export const authReducer = authSlice.reducer

Стоит мне попытаться связать клиентскую часть и серверную сразу вылезает ошибка "TypeError: (0 , _react.createContext) is not a function"

Метод для связывания написан внизу страницы

Home.getInitialProps = wrapper.getInitialPageProps(store => ({pathname, req, res}) => {
    console.log('2. Page.getInitialProps uses the store to dispatch things');
    return {props:{}}
})
4
  • Если ты используешь провайдер, то должен перейти на клиентские компоненты
    – Grundy
    29 янв в 16:24
  • @Grundy Спасибо большое, забыл совсем про это 29 янв в 16:39
  • @Grundy возможно вы сможете так же подсказать по данному вопросу. Я пытаюсь получить данные из redux, вызываю dispatch или selector, но у меня сразу же все выходит в ошибку " could not find react-redux context value; please ensure the component is wrapped in a <Provider>" хотя провайдер и wrapper подключен 29 янв в 17:52
  • Какой в итоге у тебя код получился? Возможно компонент внутри которого обращаешься - не обернут. Можешь задать отдельный вопрос приложив всю необходимую информацию
    – Grundy
    29 янв в 20:54

1 ответ 1

1

Данная ошибка появлялась из-за моей невнимательности, забыл установить в "use client"

"Если ты используешь провайдер, то должен перейти на клиентские компоненты"

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.