Skip to content
New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in 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