Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Jump to bottom

bug: React.createContext is not defined on Redux with NextJS SSR implementation #2028

Closed
9ssi7 opened this issue Jun 9, 2023 · 2 comments
Closed

bug: React.createContext is not defined on Redux with NextJS SSR implementation #2028

9ssi7 opened this issue Jun 9, 2023 · 2 comments

Comments

@9ssi7
Copy link

9ssi7 commented Jun 9, 2023 •
edited
Loading

What is the current behavior?

right now when i try to provide redux in my application i get an error like below.

// in my nextjs layout.tsx file
import { Provider } from "react-redux";

import { PropsWithChildren } from "react";
import store from "~/store/store";

export default function Root({children} : PropsWithChildren) {
  return (<html>
   <body>
    <Provider store={store}>
       {children}
     </Provider>
  </body>
</html>
)
}

the error:
image

Steps to Reproduce

You can recreate it as I mentioned above.

What is the expected behavior?

Redux should provide a special provider for Nextjs or client/server components

How did i fix it?

I created a provider under the store and used the phrase "use client" here

// ~/store/provider.tsx
"use client";

import { Provider } from "react-redux";

import { PropsWithChildren } from "react";
import store from "./store";

export default function ReduxProvider({ children }: PropsWithChildren) {
  return <Provider store={store}>{children}</Provider>;
}

in my layout

// layout.tsx
import { PropsWithChildren } from "react";

import ReduxProvider from "~/store/provider";

export default function Root({children} : PropsWithChildren) {
  return (<html>
   <body>
    <ReduxProvider>
       {children}
     </ReduxProvider>
  </body>
</html>
)
}

Environment Details

My dependencies on package.json file

{
  "react": "18.2.0",
  "next": "canary",
   "react-redux": "^8.0.7",
   "redux": "^4.2.1",
   "@reduxjs/toolkit": "^1.9.5",
}
@markerikson markerikson transferred this issue from reduxjs/redux Jun 9, 2023
@markerikson
Copy link
Contributor

markerikson commented Jun 9, 2023 •
edited
Loading

A few notes here:

  • This relates to React-Redux, not redux core
  • This only occurs in the new Next app directory specifically
  • This is a general problem with React, not specific to React-Redux (you can't render or use context inside of a React Server Component)
  • We are looking into potential solutions ( see lazily create Context for RSC compat #2025 )

@phryneas
Copy link
Member

This should be solved in v8.1.2 - to an extent: Importing something from react-redux in a RSC file should now not throw an error any more, but you still will not be able to use the Provider or any hooks in a RSC.

Redux just has no strategy for RSC, as RSC renders might be shared between multiple users and are generally stateless.

@markerikson markerikson mentioned this issue Aug 5, 2023
Open
# for free to join this conversation on GitHub. Already have an account? # to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@markerikson @phryneas @9ssi7