Почему при сборке проекта с использованием next.js возникает ошибка "Не удается деструктурировать свойство 'store' из 'useReduxContext2(...)', так как оно равно null"?

Question

Модест

nextjs , redux

Почему при сборке проекта с использованием next.js возникает ошибка "Не удается деструктурировать свойство 'store' из 'useReduxContext2(...)', так как оно равно null"?

Конечно, я могу вам помочь в решении проблемы с вашим приложением. Я столкнулся с ошибкой "Cannot destructure property 'store' of 'useReduxContext2(...)' as it is null" при запуске билда, но ранее у вас все работало в dev режиме. Возможно, добавление провайдера в _app.js может помочь, но вы используете app router. Поэтому мне нужно понять, как правильно настроить app router, о котором нет информации в интернете. Также, я посмотрел ваш <a href="https://github.com/f01zy/PlayCloud/tree/client" rel="nofollow">код</a>, но хотел бы уточнить некоторые детали перед тем, как приступить к решению проблемы.

3 июля 2024 г. 15:02

Ответы на вопрос 2

Похожие вопросы

Answer 1


Ошибка "Cannot destructure property 'store' of 'useReduxContext2(...)' as it is null" может возникать по нескольким причинам. Одной из них может быть то, что компонент, пытающийся получить доступ к свойству 'store', делает это до того, как контекст Redux был правильно установлен. 

Если у вас уже есть провайдер Redux в вашем приложении, убедитесь, что он обертывает все компоненты, которые пытаются получить доступ к Redux store. 

Если вы используете next.js с app router, вам может потребоваться настроить соответствующий провайдер в вашем _app.js файле. В случае использования app router в next.js, эта настройка может отличаться от обычного провайдера в контексте. 

Если у вас возникли сложности с настройкой app router, рекомендуется внимательно изучить документацию next.js или обратиться к сообществу разработчиков для получения помощи.

Если у вас есть дополнительные детали или код, который вы могли бы предоставить для дополнительного анализа, это могло бы помочь в решении проблемы более точно.

Answer 2

А если так? 
 // app/layout.js
'client'

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "@/base.scss";
import { Provider } from 'react-redux';
import { store } from '../redux/store';
import Layout from "@/components/Layout";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Home | PlayCloud",
  description: "Unique web application for listening to a huge amount of music in a unique format",
}

export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <Provider store={store}>
          <Layout>
            {children}
          </Layout>
        </Provider>
      </body>
    </html>
  )
}
 
 Cannot destructure property 'store' of 'useReduxContext2(...)' as it is null?
 
 Вам не нужно использовать useReduxContext2, потому что у Вас уже есть Provider, который делает контекст доступным для всех вложенных компонентов. Используйте useSelector и useDispatch из react-redux для получения доступа к состоянию и отправки в Redux.