계발하는 개발자

[Next.js 13] Error: could not find react-redux context value; please ensure the component is wrapped in a <Provider> 에러 해결법 본문

❗️Error

[Next.js 13] Error: could not find react-redux context value; please ensure the component is wrapped in a <Provider> 에러 해결법

dev_genie 2023. 10. 13. 01:58

참고

https://github.com/reduxjs/react-redux/issues/2049

https://lobsterhyeon.tistory.com/41

 

에러

next.js에서 redux-toolkit 사용하려고 했을 때 다음과 같은 에러가 자꾸 났다..!

Error: could not find react-redux context value; please ensure the component is wrapped in a <Provider>

 Provider로 컴포넌트를 wrapping 하라는 메시지와 함께.

이러쿵 저러쿵 해봐도 자꾸 떠서 슬슬 한계 임박할 쯤에.. 다른 사람 github issue, 블로그 글을 참고해서 해결!

 

원인

먼저 에러 자체는 루트 컴포넌트를 Provider로 감싸지 않아서 발생한 거였다.

redux toolkit을 사용하려면 루트 컴포넌트를 Provider로 감싸야 한다.

 

해결 

layout.tsx에서 렌더링되는 children을

<Provider store={store}>{children} </Provider> 이런식으로 Provider로 감싸줬다.

 

그리고 페이지 상단에 "use client"도 꼭 명시해줘야 한다!

use client 안 쓰면 아래같은 새로운 에러창을 또 만날 수 있다..

"use client" 를 씀으로 인해 클라이언트 측에서 렌더링할 컴포넌트임을 밝힐 수 있다.


전체적인 에러 해결 코드는 아래와 같다.

<수정 후>

// layout.tsx

"use client" 
import { Provider } from "react-redux"; 
import store from "../ts/store"; 

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        <Provider store={store}>
            {children}
        </Provider>
      </body>
    </html>
  )
}

 

원랜 이런 코드였음 ⬇️

<수정 전>

// layout.tsx

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}
LIST

'❗️Error' 카테고리의 다른 글

[Redux/Redux-persist] Warning: Prop `src` did not match 에러 해결  (2) 2023.10.17
[Redux/Redux-persist] A non-serializable value was detected in an action 에러 해결  (0) 2023.10.17
[ec2 인스턴스 연결 에러] "No such file or directory" 에러 해결법  (0) 2023.10.11
[MySQL 에러] You are using safe update mode and you tried to update a table without a WHERE that uses a KEY column To disable safe mode, toggle the option in Preferences 에러 해결법  (0) 2023.09.29
[draggable 에러] el.draggable is not a function 해결  (0) 2023.09.25
profile

dev_genie

@dev_genie

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!