[Flight] allow context providers from client modules (#35675)

Allows Server Components to import Context from a `"use client'` module
and render its Provider.
Only tricky part was that I needed to add `REACT_CONTEXT_TYPE` handling
in mountLazyComponent so lazy-resolved Context types can be rendered.
Previously only functions, REACT_FORWARD_REF_TYPE, and REACT_MEMO_TYPE
were handled.
Tested in the Flight fixture.
ty bb claude
Closes#35340
---------
Co-authored-by: Sophie Alpert <git@sophiebits.com>

Author: rickhanlonii

fixtures/flight/src/App.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import{renderToReadableStream}from'react-server-dom-unbundled/server';
 import{createFromReadableStream}from'react-server-dom-webpack/client';
 import{PassThrough,Readable}from'stream';
-
+import{ClientContext,ClientReadContext}from'./ClientContext.js';
 importContainerfrom'./Container.js';
 
 import{Counter}from'./Counter.js';
@@ -235,6 +235,11 @@ export default async function App({prerender, noCache}) {
 <Foo>{dedupedChild}</Foo>
 <Bar>{Promise.resolve([dedupedChild])}</Bar>
 <Navigate/>
+<ClientContextvalue="from server">
+<div>
+<ClientReadContext/>
+</div>
+</ClientContext>
 {prerender ? null : (// TODO: prerender is broken for large content for some reason.
 <React.Suspensefallback={null}>
 <LargeContent/>

fixtures/flight/src/ClientContext.js

@@ -0,0 +1,12 @@
+'use client';
+
+import{createContext,use}from'react';
+
+constClientContext=createContext(null);
+
+functionClientReadContext(){
+constvalue=use(ClientContext);
+return<p>{value}</p>;
+}
+
+export{ClientContext,ClientReadContext};

packages/react-reconciler/src/ReactFiberBeginWork.js

@@ -128,6 +128,7 @@ import {
 REACT_LAZY_TYPE,
 REACT_FORWARD_REF_TYPE,
 REACT_MEMO_TYPE,
+REACT_CONTEXT_TYPE,
 }from'shared/ReactSymbols';
 import{setCurrentFiber}from'./ReactCurrentFiber';
 import{
@@ -2140,6 +2141,10 @@ function mountLazyComponent(
 props,
 renderLanes,
 );
+} else if ($$typeof === REACT_CONTEXT_TYPE) {
+workInProgress.tag=ContextProvider;
+workInProgress.type=Component;
+returnupdateContextProvider(null,workInProgress,renderLanes);
 }
 }
 

packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js

@@ -116,6 +116,44 @@ describe('ReactLazy', () => {
 expect(root).toMatchRenderedOutput('Hi again');
 });
 
+it('renders a lazy context provider',async()=>{
+constContext=React.createContext('default');
+functionConsumerText(){
+return<Texttext={React.useContext(Context)}/>;
+}
+// Context.Provider === Context, so we can lazy-load the context itself
+constLazyProvider=lazy(()=>fakeImport(Context));
+
+constroot=ReactTestRenderer.create(
+<Suspensefallback={<Texttext="Loading..."/>}>
+<LazyProvidervalue="Hi">
+<ConsumerText/>
+</LazyProvider>
+</Suspense>,
+{
+unstable_isConcurrent: true,
+},
+);
+
+awaitwaitForAll(['Loading...']);
+expect(root).not.toMatchRenderedOutput('Hi');
+
+awaitact(()=>resolveFakeImport(Context));
+assertLog(['Hi']);
+expect(root).toMatchRenderedOutput('Hi');
+
+// Should not suspend on update
+root.update(
+<Suspensefallback={<Texttext="Loading..."/>}>
+<LazyProvidervalue="Hi again">
+<ConsumerText/>
+</LazyProvider>
+</Suspense>,
+);
+awaitwaitForAll(['Hi again']);
+expect(root).toMatchRenderedOutput('Hi again');
+});
+
 it('can resolve synchronously without suspending',async()=>{
 constLazyText=lazy(()=>({
 then(cb){
@@ -858,13 +896,20 @@ describe('ReactLazy', () => {
 );
 });
 
-it('throws with a useful error when wrapping Context with lazy()',async()=>{
-constContext=React.createContext(null);
-constBadLazy=lazy(()=>fakeImport(Context));
+it('renders a lazy context provider without value prop',async()=>{
+// Context providers work when wrapped in lazy()
+constContext=React.createContext('default');
+constLazyProvider=lazy(()=>fakeImport(Context));
+
+functionConsumerText(){
+return<Texttext={React.useContext(Context)}/>;
+}
 
 constroot=ReactTestRenderer.create(
 <Suspensefallback={<Texttext="Loading..."/>}>
-<BadLazy/>
+<LazyProvidervalue="provided">
+<ConsumerText/>
+</LazyProvider>
 </Suspense>,
 {
 unstable_isConcurrent: true,
@@ -873,16 +918,9 @@ describe('ReactLazy', () => {
 
 awaitwaitForAll(['Loading...']);
 
-awaitresolveFakeImport(Context);
-root.update(
-<Suspensefallback={<Texttext="Loading..."/>}>
-<BadLazy/>
-</Suspense>,
-);
-awaitwaitForThrow(
-'Element type is invalid. Received a promise that resolves to: Context. '+
-'Lazy element type must resolve to a class or function.',
-);
+awaitact(()=>resolveFakeImport(Context));
+assertLog(['provided']);
+expect(root).toMatchRenderedOutput('provided');
 });
 
 it('throws with a useful error when wrapping Context.Consumer with lazy()',async()=>{

packages/react-server-dom-turbopack/src/ReactFlightTurbopackReferences.js

@@ -182,11 +182,10 @@ const deepProxyHandlers: Proxy$traps<mixed> = {
 // $FlowFixMe[prop-missing]
 returnObject.prototype[Symbol.toStringTag];
 case'Provider':
-thrownewError(
-`Cannot render a Client Context Provider on the Server. `+
-`Instead, you can export a Client Component wrapper `+
-`that itself renders a Client Context Provider.`,
-);
+// Context.Provider === Context in React, so return the same reference.
+// This allows server components to render <ClientContext.Provider>
+// which will be serialized and executed on the client.
+returnreceiver;
 case'then':
 thrownewError(
 `Cannot await or return from a thenable. `+

packages/react-server-dom-unbundled/src/ReactFlightUnbundledReferences.js

@@ -182,11 +182,10 @@ const deepProxyHandlers: Proxy$traps<mixed> = {
 // $FlowFixMe[prop-missing]
 returnObject.prototype[Symbol.toStringTag];
 case'Provider':
-thrownewError(
-`Cannot render a Client Context Provider on the Server. `+
-`Instead, you can export a Client Component wrapper `+
-`that itself renders a Client Context Provider.`,
-);
+// Context.Provider === Context in React, so return the same reference.
+// This allows server components to render <ClientContext.Provider>
+// which will be serialized and executed on the client.
+returnreceiver;
 case'then':
 thrownewError(
 `Cannot await or return from a thenable. `+

packages/react-server-dom-webpack/src/ReactFlightWebpackReferences.js

@@ -182,11 +182,10 @@ const deepProxyHandlers: Proxy$traps<mixed> = {
 // $FlowFixMe[prop-missing]
 returnObject.prototype[Symbol.toStringTag];
 case'Provider':
-thrownewError(
-`Cannot render a Client Context Provider on the Server. `+
-`Instead, you can export a Client Component wrapper `+
-`that itself renders a Client Context Provider.`,
-);
+// Context.Provider === Context in React, so return the same reference.
+// This allows server components to render <ClientContext.Provider>
+// which will be serialized and executed on the client.
+returnreceiver;
 case'then':
 thrownewError(
 `Cannot await or return from a thenable. `+

packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js

@@ -787,19 +787,68 @@ describe('ReactFlightDOM', () => {
 <ClientModule.Componentkey="this adds instrumentation"/>;
 });
 
-it('throws when accessing a Context.Provider below the client exports',()=>{
+it('does not throw when accessing a Context.Provider from client exports',()=>{
 constContext=React.createContext();
 constClientModule=clientExports({
  Context,
 });
 functiondotting(){
 returnClientModule.Context.Provider;
 }
-expect(dotting).toThrowError(
-`Cannot render a Client Context Provider on the Server. `+
-`Instead, you can export a Client Component wrapper `+
-`that itself renders a Client Context Provider.`,
+expect(dotting).not.toThrowError();
+});
+
+it('can render a client Context.Provider from a server component',async()=>{
+// Create a context in a client module
+constTestContext=React.createContext('default');
+constClientModule=clientExports({
+ TestContext,
+});
+
+// Client component that reads context
+functionClientConsumer(){
+constvalue=React.useContext(TestContext);
+return<span>{value}</span>;
+}
+const{ClientConsumer: ClientConsumerRef}=clientExports({ClientConsumer});
+
+functionPrint({response}){
+returnuse(response);
+}
+
+functionApp({response}){
+return(
+<Suspensefallback={<h1>Loading...</h1>}>
+<Printresponse={response}/>
+</Suspense>
+);
+}
+
+// Server component that provides context
+functionServerApp(){
+return(
+<ClientModule.TestContext.Providervalue="from-server">
+<div>
+<ClientConsumerRef/>
+</div>
+</ClientModule.TestContext.Provider>
+);
+}
+
+const{writable, readable}=getTestStream();
+const{pipe}=awaitserverAct(()=>
+ReactServerDOMServer.renderToPipeableStream(<ServerApp/>,webpackMap),
 );
+pipe(writable);
+constresponse=ReactServerDOMClient.createFromReadableStream(readable);
+
+constcontainer=document.createElement('div');
+constroot=ReactDOMClient.createRoot(container);
+awaitact(()=>{
+root.render(<Appresponse={response}/>);
+});
+
+expect(container.innerHTML).toBe('<div><span>from-server</span></div>');
 });
 
 it('should progressively reveal server components',async()=>{

packages/react-server/src/ReactFlightServerTemporaryReferences.js

@@ -65,11 +65,10 @@ const proxyHandlers: Proxy$traps<mixed> = {
  // $FlowFixMe[prop-missing]
  return Object.prototype[Symbol.toStringTag];
  case 'Provider':
-thrownewError(
-`Cannot render a Client Context Provider on the Server. `+
-`Instead, you can export a Client Component wrapper `+
-`that itself renders a Client Context Provider.`,
-);
+ // Context.Provider === Context in React, so return the same reference.
+ // This allows server components to render <ClientContext.Provider>
+ // which will be serialized and executed on the client.
+ return receiver;
  case 'then':
  // Allow returning a temporary reference from an async function
  // Unlike regular Client References, a Promise would never have been serialized as

fixtures/flight/src/App.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import{renderToReadableStream}from'react-server-dom-unbundled/server';
 import{createFromReadableStream}from'react-server-dom-webpack/client';
 import{PassThrough,Readable}from'stream';
-
+import{ClientContext,ClientReadContext}from'./ClientContext.js';
 importContainerfrom'./Container.js';
 
 import{Counter}from'./Counter.js';
@@ -235,6 +235,11 @@ export default async function App({prerender, noCache}) {
 <Foo>{dedupedChild}</Foo>
 <Bar>{Promise.resolve([dedupedChild])}</Bar>
 <Navigate/>
+<ClientContextvalue="from server">
+<div>
+<ClientReadContext/>
+</div>
+</ClientContext>
 {prerender ? null : (// TODO: prerender is broken for large content for some reason.
 <React.Suspensefallback={null}>
 <LargeContent/>

fixtures/flight/src/ClientContext.js

@@ -0,0 +1,12 @@
+'use client';
+
+import{createContext,use}from'react';
+
+constClientContext=createContext(null);
+
+functionClientReadContext(){
+constvalue=use(ClientContext);
+return<p>{value}</p>;
+}
+
+export{ClientContext,ClientReadContext};

packages/react-reconciler/src/ReactFiberBeginWork.js

@@ -128,6 +128,7 @@ import {
 REACT_LAZY_TYPE,
 REACT_FORWARD_REF_TYPE,
 REACT_MEMO_TYPE,
+REACT_CONTEXT_TYPE,
 }from'shared/ReactSymbols';
 import{setCurrentFiber}from'./ReactCurrentFiber';
 import{
@@ -2140,6 +2141,10 @@ function mountLazyComponent(
 props,
 renderLanes,
 );
+} else if ($$typeof === REACT_CONTEXT_TYPE) {
+workInProgress.tag=ContextProvider;
+workInProgress.type=Component;
+returnupdateContextProvider(null,workInProgress,renderLanes);
 }
 }
 

packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js

@@ -116,6 +116,44 @@ describe('ReactLazy', () => {
 expect(root).toMatchRenderedOutput('Hi again');
 });
 
+it('renders a lazy context provider',async()=>{
+constContext=React.createContext('default');
+functionConsumerText(){
+return<Texttext={React.useContext(Context)}/>;
+}
+// Context.Provider === Context, so we can lazy-load the context itself
+constLazyProvider=lazy(()=>fakeImport(Context));
+
+constroot=ReactTestRenderer.create(
+<Suspensefallback={<Texttext="Loading..."/>}>
+<LazyProvidervalue="Hi">
+<ConsumerText/>
+</LazyProvider>
+</Suspense>,
+{
+unstable_isConcurrent: true,
+},
+);
+
+awaitwaitForAll(['Loading...']);
+expect(root).not.toMatchRenderedOutput('Hi');
+
+awaitact(()=>resolveFakeImport(Context));
+assertLog(['Hi']);
+expect(root).toMatchRenderedOutput('Hi');
+
+// Should not suspend on update
+root.update(
+<Suspensefallback={<Texttext="Loading..."/>}>
+<LazyProvidervalue="Hi again">
+<ConsumerText/>
+</LazyProvider>
+</Suspense>,
+);
+awaitwaitForAll(['Hi again']);
+expect(root).toMatchRenderedOutput('Hi again');
+});
+
 it('can resolve synchronously without suspending',async()=>{
 constLazyText=lazy(()=>({
 then(cb){
@@ -858,13 +896,20 @@ describe('ReactLazy', () => {
 );
 });
 
-it('throws with a useful error when wrapping Context with lazy()',async()=>{
-constContext=React.createContext(null);
-constBadLazy=lazy(()=>fakeImport(Context));
+it('renders a lazy context provider without value prop',async()=>{
+// Context providers work when wrapped in lazy()
+constContext=React.createContext('default');
+constLazyProvider=lazy(()=>fakeImport(Context));
+
+functionConsumerText(){
+return<Texttext={React.useContext(Context)}/>;
+}
 
 constroot=ReactTestRenderer.create(
 <Suspensefallback={<Texttext="Loading..."/>}>
-<BadLazy/>
+<LazyProvidervalue="provided">
+<ConsumerText/>
+</LazyProvider>
 </Suspense>,
 {
 unstable_isConcurrent: true,
@@ -873,16 +918,9 @@ describe('ReactLazy', () => {
 
 awaitwaitForAll(['Loading...']);
 
-awaitresolveFakeImport(Context);
-root.update(
-<Suspensefallback={<Texttext="Loading..."/>}>
-<BadLazy/>
-</Suspense>,
-);
-awaitwaitForThrow(
-'Element type is invalid. Received a promise that resolves to: Context. '+
-'Lazy element type must resolve to a class or function.',
-);
+awaitact(()=>resolveFakeImport(Context));
+assertLog(['provided']);
+expect(root).toMatchRenderedOutput('provided');
 });
 
 it('throws with a useful error when wrapping Context.Consumer with lazy()',async()=>{

packages/react-server-dom-turbopack/src/ReactFlightTurbopackReferences.js

@@ -182,11 +182,10 @@ const deepProxyHandlers: Proxy$traps<mixed> = {
 // $FlowFixMe[prop-missing]
 returnObject.prototype[Symbol.toStringTag];
 case'Provider':
-thrownewError(
-`Cannot render a Client Context Provider on the Server. `+
-`Instead, you can export a Client Component wrapper `+
-`that itself renders a Client Context Provider.`,
-);
+// Context.Provider === Context in React, so return the same reference.
+// This allows server components to render <ClientContext.Provider>
+// which will be serialized and executed on the client.
+returnreceiver;
 case'then':
 thrownewError(
 `Cannot await or return from a thenable. `+

packages/react-server-dom-unbundled/src/ReactFlightUnbundledReferences.js

@@ -182,11 +182,10 @@ const deepProxyHandlers: Proxy$traps<mixed> = {
 // $FlowFixMe[prop-missing]
 returnObject.prototype[Symbol.toStringTag];
 case'Provider':
-thrownewError(
-`Cannot render a Client Context Provider on the Server. `+
-`Instead, you can export a Client Component wrapper `+
-`that itself renders a Client Context Provider.`,
-);
+// Context.Provider === Context in React, so return the same reference.
+// This allows server components to render <ClientContext.Provider>
+// which will be serialized and executed on the client.
+returnreceiver;
 case'then':
 thrownewError(
 `Cannot await or return from a thenable. `+

packages/react-server-dom-webpack/src/ReactFlightWebpackReferences.js

@@ -182,11 +182,10 @@ const deepProxyHandlers: Proxy$traps<mixed> = {
 // $FlowFixMe[prop-missing]
 returnObject.prototype[Symbol.toStringTag];
 case'Provider':
-thrownewError(
-`Cannot render a Client Context Provider on the Server. `+
-`Instead, you can export a Client Component wrapper `+
-`that itself renders a Client Context Provider.`,
-);
+// Context.Provider === Context in React, so return the same reference.
+// This allows server components to render <ClientContext.Provider>
+// which will be serialized and executed on the client.
+returnreceiver;
 case'then':
 thrownewError(
 `Cannot await or return from a thenable. `+

packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js

@@ -787,19 +787,68 @@ describe('ReactFlightDOM', () => {
 <ClientModule.Componentkey="this adds instrumentation"/>;
 });
 
-it('throws when accessing a Context.Provider below the client exports',()=>{
+it('does not throw when accessing a Context.Provider from client exports',()=>{
 constContext=React.createContext();
 constClientModule=clientExports({
  Context,
 });
 functiondotting(){
 returnClientModule.Context.Provider;
 }
-expect(dotting).toThrowError(
-`Cannot render a Client Context Provider on the Server. `+
-`Instead, you can export a Client Component wrapper `+
-`that itself renders a Client Context Provider.`,
+expect(dotting).not.toThrowError();
+});
+
+it('can render a client Context.Provider from a server component',async()=>{
+// Create a context in a client module
+constTestContext=React.createContext('default');
+constClientModule=clientExports({
+ TestContext,
+});
+
+// Client component that reads context
+functionClientConsumer(){
+constvalue=React.useContext(TestContext);
+return<span>{value}</span>;
+}
+const{ClientConsumer: ClientConsumerRef}=clientExports({ClientConsumer});
+
+functionPrint({response}){
+returnuse(response);
+}
+
+functionApp({response}){
+return(
+<Suspensefallback={<h1>Loading...</h1>}>
+<Printresponse={response}/>
+</Suspense>
+);
+}
+
+// Server component that provides context
+functionServerApp(){
+return(
+<ClientModule.TestContext.Providervalue="from-server">
+<div>
+<ClientConsumerRef/>
+</div>
+</ClientModule.TestContext.Provider>
+);
+}
+
+const{writable, readable}=getTestStream();
+const{pipe}=awaitserverAct(()=>
+ReactServerDOMServer.renderToPipeableStream(<ServerApp/>,webpackMap),
 );
+pipe(writable);
+constresponse=ReactServerDOMClient.createFromReadableStream(readable);
+
+constcontainer=document.createElement('div');
+constroot=ReactDOMClient.createRoot(container);
+awaitact(()=>{
+root.render(<Appresponse={response}/>);
+});
+
+expect(container.innerHTML).toBe('<div><span>from-server</span></div>');
 });
 
 it('should progressively reveal server components',async()=>{

packages/react-server/src/ReactFlightServerTemporaryReferences.js

@@ -65,11 +65,10 @@ const proxyHandlers: Proxy$traps<mixed> = {
  // $FlowFixMe[prop-missing]
  return Object.prototype[Symbol.toStringTag];
  case 'Provider':
-thrownewError(
-`Cannot render a Client Context Provider on the Server. `+
-`Instead, you can export a Client Component wrapper `+
-`that itself renders a Client Context Provider.`,
-);
+ // Context.Provider === Context in React, so return the same reference.
+ // This allows server components to render <ClientContext.Provider>
+ // which will be serialized and executed on the client.
+ return receiver;
  case 'then':
  // Allow returning a temporary reference from an async function
  // Unlike regular Client References, a Promise would never have been serialized as

fixtures/flight/src/App.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import{renderToReadableStream}from'react-server-dom-unbundled/server';
 import{createFromReadableStream}from'react-server-dom-webpack/client';
 import{PassThrough,Readable}from'stream';
-
+import{ClientContext,ClientReadContext}from'./ClientContext.js';
 importContainerfrom'./Container.js';
 
 import{Counter}from'./Counter.js';
@@ -235,6 +235,11 @@ export default async function App({prerender, noCache}) {
 <Foo>{dedupedChild}</Foo>
 <Bar>{Promise.resolve([dedupedChild])}</Bar>
 <Navigate/>
+<ClientContextvalue="from server">
+<div>
+<ClientReadContext/>
+</div>
+</ClientContext>
 {prerender ? null : (// TODO: prerender is broken for large content for some reason.
 <React.Suspensefallback={null}>
 <LargeContent/>

fixtures/flight/src/ClientContext.js

@@ -0,0 +1,12 @@
+'use client';
+
+import{createContext,use}from'react';
+
+constClientContext=createContext(null);
+
+functionClientReadContext(){
+constvalue=use(ClientContext);
+return<p>{value}</p>;
+}
+
+export{ClientContext,ClientReadContext};

packages/react-reconciler/src/ReactFiberBeginWork.js

@@ -128,6 +128,7 @@ import {
 REACT_LAZY_TYPE,
 REACT_FORWARD_REF_TYPE,
 REACT_MEMO_TYPE,
+REACT_CONTEXT_TYPE,
 }from'shared/ReactSymbols';
 import{setCurrentFiber}from'./ReactCurrentFiber';
 import{
@@ -2140,6 +2141,10 @@ function mountLazyComponent(
 props,
 renderLanes,
 );
+} else if ($$typeof === REACT_CONTEXT_TYPE) {
+workInProgress.tag=ContextProvider;
+workInProgress.type=Component;
+returnupdateContextProvider(null,workInProgress,renderLanes);
 }
 }
 

packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js

@@ -116,6 +116,44 @@ describe('ReactLazy', () => {
 expect(root).toMatchRenderedOutput('Hi again');
 });
 
+it('renders a lazy context provider',async()=>{
+constContext=React.createContext('default');
+functionConsumerText(){
+return<Texttext={React.useContext(Context)}/>;
+}
+// Context.Provider === Context, so we can lazy-load the context itself
+constLazyProvider=lazy(()=>fakeImport(Context));
+
+constroot=ReactTestRenderer.create(
+<Suspensefallback={<Texttext="Loading..."/>}>
+<LazyProvidervalue="Hi">
+<ConsumerText/>
+</LazyProvider>
+</Suspense>,
+{
+unstable_isConcurrent: true,
+},
+);
+
+awaitwaitForAll(['Loading...']);
+expect(root).not.toMatchRenderedOutput('Hi');
+
+awaitact(()=>resolveFakeImport(Context));
+assertLog(['Hi']);
+expect(root).toMatchRenderedOutput('Hi');
+
+// Should not suspend on update
+root.update(
+<Suspensefallback={<Texttext="Loading..."/>}>
+<LazyProvidervalue="Hi again">
+<ConsumerText/>
+</LazyProvider>
+</Suspense>,
+);
+awaitwaitForAll(['Hi again']);
+expect(root).toMatchRenderedOutput('Hi again');
+});
+
 it('can resolve synchronously without suspending',async()=>{
 constLazyText=lazy(()=>({
 then(cb){
@@ -858,13 +896,20 @@ describe('ReactLazy', () => {
 );
 });
 
-it('throws with a useful error when wrapping Context with lazy()',async()=>{
-constContext=React.createContext(null);
-constBadLazy=lazy(()=>fakeImport(Context));
+it('renders a lazy context provider without value prop',async()=>{
+// Context providers work when wrapped in lazy()
+constContext=React.createContext('default');
+constLazyProvider=lazy(()=>fakeImport(Context));
+
+functionConsumerText(){
+return<Texttext={React.useContext(Context)}/>;
+}
 
 constroot=ReactTestRenderer.create(
 <Suspensefallback={<Texttext="Loading..."/>}>
-<BadLazy/>
+<LazyProvidervalue="provided">
+<ConsumerText/>
+</LazyProvider>
 </Suspense>,
 {
 unstable_isConcurrent: true,
@@ -873,16 +918,9 @@ describe('ReactLazy', () => {
 
 awaitwaitForAll(['Loading...']);
 
-awaitresolveFakeImport(Context);
-root.update(
-<Suspensefallback={<Texttext="Loading..."/>}>
-<BadLazy/>
-</Suspense>,
-);
-awaitwaitForThrow(
-'Element type is invalid. Received a promise that resolves to: Context. '+
-'Lazy element type must resolve to a class or function.',
-);
+awaitact(()=>resolveFakeImport(Context));
+assertLog(['provided']);
+expect(root).toMatchRenderedOutput('provided');
 });
 
 it('throws with a useful error when wrapping Context.Consumer with lazy()',async()=>{

packages/react-server-dom-turbopack/src/ReactFlightTurbopackReferences.js

@@ -182,11 +182,10 @@ const deepProxyHandlers: Proxy$traps<mixed> = {
 // $FlowFixMe[prop-missing]
 returnObject.prototype[Symbol.toStringTag];
 case'Provider':
-thrownewError(
-`Cannot render a Client Context Provider on the Server. `+
-`Instead, you can export a Client Component wrapper `+
-`that itself renders a Client Context Provider.`,
-);
+// Context.Provider === Context in React, so return the same reference.
+// This allows server components to render <ClientContext.Provider>
+// which will be serialized and executed on the client.
+returnreceiver;
 case'then':
 thrownewError(
 `Cannot await or return from a thenable. `+

packages/react-server-dom-unbundled/src/ReactFlightUnbundledReferences.js

@@ -182,11 +182,10 @@ const deepProxyHandlers: Proxy$traps<mixed> = {
 // $FlowFixMe[prop-missing]
 returnObject.prototype[Symbol.toStringTag];
 case'Provider':
-thrownewError(
-`Cannot render a Client Context Provider on the Server. `+
-`Instead, you can export a Client Component wrapper `+
-`that itself renders a Client Context Provider.`,
-);
+// Context.Provider === Context in React, so return the same reference.
+// This allows server components to render <ClientContext.Provider>
+// which will be serialized and executed on the client.
+returnreceiver;
 case'then':
 thrownewError(
 `Cannot await or return from a thenable. `+

packages/react-server-dom-webpack/src/ReactFlightWebpackReferences.js

@@ -182,11 +182,10 @@ const deepProxyHandlers: Proxy$traps<mixed> = {
 // $FlowFixMe[prop-missing]
 returnObject.prototype[Symbol.toStringTag];
 case'Provider':
-thrownewError(
-`Cannot render a Client Context Provider on the Server. `+
-`Instead, you can export a Client Component wrapper `+
-`that itself renders a Client Context Provider.`,
-);
+// Context.Provider === Context in React, so return the same reference.
+// This allows server components to render <ClientContext.Provider>
+// which will be serialized and executed on the client.
+returnreceiver;
 case'then':
 thrownewError(
 `Cannot await or return from a thenable. `+

packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js

@@ -787,19 +787,68 @@ describe('ReactFlightDOM', () => {
 <ClientModule.Componentkey="this adds instrumentation"/>;
 });
 
-it('throws when accessing a Context.Provider below the client exports',()=>{
+it('does not throw when accessing a Context.Provider from client exports',()=>{
 constContext=React.createContext();
 constClientModule=clientExports({
  Context,
 });
 functiondotting(){
 returnClientModule.Context.Provider;
 }
-expect(dotting).toThrowError(
-`Cannot render a Client Context Provider on the Server. `+
-`Instead, you can export a Client Component wrapper `+
-`that itself renders a Client Context Provider.`,
+expect(dotting).not.toThrowError();
+});
+
+it('can render a client Context.Provider from a server component',async()=>{
+// Create a context in a client module
+constTestContext=React.createContext('default');
+constClientModule=clientExports({
+ TestContext,
+});
+
+// Client component that reads context
+functionClientConsumer(){
+constvalue=React.useContext(TestContext);
+return<span>{value}</span>;
+}
+const{ClientConsumer: ClientConsumerRef}=clientExports({ClientConsumer});
+
+functionPrint({response}){
+returnuse(response);
+}
+
+functionApp({response}){
+return(
+<Suspensefallback={<h1>Loading...</h1>}>
+<Printresponse={response}/>
+</Suspense>
+);
+}
+
+// Server component that provides context
+functionServerApp(){
+return(
+<ClientModule.TestContext.Providervalue="from-server">
+<div>
+<ClientConsumerRef/>
+</div>
+</ClientModule.TestContext.Provider>
+);
+}
+
+const{writable, readable}=getTestStream();
+const{pipe}=awaitserverAct(()=>
+ReactServerDOMServer.renderToPipeableStream(<ServerApp/>,webpackMap),
 );
+pipe(writable);
+constresponse=ReactServerDOMClient.createFromReadableStream(readable);
+
+constcontainer=document.createElement('div');
+constroot=ReactDOMClient.createRoot(container);
+awaitact(()=>{
+root.render(<Appresponse={response}/>);
+});
+
+expect(container.innerHTML).toBe('<div><span>from-server</span></div>');
 });
 
 it('should progressively reveal server components',async()=>{

packages/react-server/src/ReactFlightServerTemporaryReferences.js

@@ -65,11 +65,10 @@ const proxyHandlers: Proxy$traps<mixed> = {
  // $FlowFixMe[prop-missing]
  return Object.prototype[Symbol.toStringTag];
  case 'Provider':
-thrownewError(
-`Cannot render a Client Context Provider on the Server. `+
-`Instead, you can export a Client Component wrapper `+
-`that itself renders a Client Context Provider.`,
-);
+ // Context.Provider === Context in React, so return the same reference.
+ // This allows server components to render <ClientContext.Provider>
+ // which will be serialized and executed on the client.
+ return receiver;
  case 'then':
  // Allow returning a temporary reference from an async function
  // Unlike regular Client References, a Promise would never have been serialized as

fixtures/flight/src/App.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import{renderToReadableStream}from'react-server-dom-unbundled/server';
 import{createFromReadableStream}from'react-server-dom-webpack/client';
 import{PassThrough,Readable}from'stream';
-
+import{ClientContext,ClientReadContext}from'./ClientContext.js';
 importContainerfrom'./Container.js';
 
 import{Counter}from'./Counter.js';
@@ -235,6 +235,11 @@ export default async function App({prerender, noCache}) {
 <Foo>{dedupedChild}</Foo>
 <Bar>{Promise.resolve([dedupedChild])}</Bar>
 <Navigate/>
+<ClientContextvalue="from server">
+<div>
+<ClientReadContext/>
+</div>
+</ClientContext>
 {prerender ? null : (// TODO: prerender is broken for large content for some reason.
 <React.Suspensefallback={null}>
 <LargeContent/>

fixtures/flight/src/ClientContext.js

@@ -0,0 +1,12 @@
+'use client';
+
+import{createContext,use}from'react';
+
+constClientContext=createContext(null);
+
+functionClientReadContext(){
+constvalue=use(ClientContext);
+return<p>{value}</p>;
+}
+
+export{ClientContext,ClientReadContext};

packages/react-reconciler/src/ReactFiberBeginWork.js

@@ -128,6 +128,7 @@ import {
 REACT_LAZY_TYPE,
 REACT_FORWARD_REF_TYPE,
 REACT_MEMO_TYPE,
+REACT_CONTEXT_TYPE,
 }from'shared/ReactSymbols';
 import{setCurrentFiber}from'./ReactCurrentFiber';
 import{
@@ -2140,6 +2141,10 @@ function mountLazyComponent(
 props,
 renderLanes,
 );
+} else if ($$typeof === REACT_CONTEXT_TYPE) {
+workInProgress.tag=ContextProvider;
+workInProgress.type=Component;
+returnupdateContextProvider(null,workInProgress,renderLanes);
 }
 }
 

packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js

@@ -116,6 +116,44 @@ describe('ReactLazy', () => {
 expect(root).toMatchRenderedOutput('Hi again');
 });
 
+it('renders a lazy context provider',async()=>{
+constContext=React.createContext('default');
+functionConsumerText(){
+return<Texttext={React.useContext(Context)}/>;
+}
+// Context.Provider === Context, so we can lazy-load the context itself
+constLazyProvider=lazy(()=>fakeImport(Context));
+
+constroot=ReactTestRenderer.create(
+<Suspensefallback={<Texttext="Loading..."/>}>
+<LazyProvidervalue="Hi">
+<ConsumerText/>
+</LazyProvider>
+</Suspense>,
+{
+unstable_isConcurrent: true,
+},
+);
+
+awaitwaitForAll(['Loading...']);
+expect(root).not.toMatchRenderedOutput('Hi');
+
+awaitact(()=>resolveFakeImport(Context));
+assertLog(['Hi']);
+expect(root).toMatchRenderedOutput('Hi');
+
+// Should not suspend on update
+root.update(
+<Suspensefallback={<Texttext="Loading..."/>}>
+<LazyProvidervalue="Hi again">
+<ConsumerText/>
+</LazyProvider>
+</Suspense>,
+);
+awaitwaitForAll(['Hi again']);
+expect(root).toMatchRenderedOutput('Hi again');
+});
+
 it('can resolve synchronously without suspending',async()=>{
 constLazyText=lazy(()=>({
 then(cb){
@@ -858,13 +896,20 @@ describe('ReactLazy', () => {
 );
 });
 
-it('throws with a useful error when wrapping Context with lazy()',async()=>{
-constContext=React.createContext(null);
-constBadLazy=lazy(()=>fakeImport(Context));
+it('renders a lazy context provider without value prop',async()=>{
+// Context providers work when wrapped in lazy()
+constContext=React.createContext('default');
+constLazyProvider=lazy(()=>fakeImport(Context));
+
+functionConsumerText(){
+return<Texttext={React.useContext(Context)}/>;
+}
 
 constroot=ReactTestRenderer.create(
 <Suspensefallback={<Texttext="Loading..."/>}>
-<BadLazy/>
+<LazyProvidervalue="provided">
+<ConsumerText/>
+</LazyProvider>
 </Suspense>,
 {
 unstable_isConcurrent: true,
@@ -873,16 +918,9 @@ describe('ReactLazy', () => {
 
 awaitwaitForAll(['Loading...']);
 
-awaitresolveFakeImport(Context);
-root.update(
-<Suspensefallback={<Texttext="Loading..."/>}>
-<BadLazy/>
-</Suspense>,
-);
-awaitwaitForThrow(
-'Element type is invalid. Received a promise that resolves to: Context. '+
-'Lazy element type must resolve to a class or function.',
-);
+awaitact(()=>resolveFakeImport(Context));
+assertLog(['provided']);
+expect(root).toMatchRenderedOutput('provided');
 });
 
 it('throws with a useful error when wrapping Context.Consumer with lazy()',async()=>{

packages/react-server-dom-turbopack/src/ReactFlightTurbopackReferences.js

@@ -182,11 +182,10 @@ const deepProxyHandlers: Proxy$traps<mixed> = {
 // $FlowFixMe[prop-missing]
 returnObject.prototype[Symbol.toStringTag];
 case'Provider':
-thrownewError(
-`Cannot render a Client Context Provider on the Server. `+
-`Instead, you can export a Client Component wrapper `+
-`that itself renders a Client Context Provider.`,
-);
+// Context.Provider === Context in React, so return the same reference.
+// This allows server components to render <ClientContext.Provider>
+// which will be serialized and executed on the client.
+returnreceiver;
 case'then':
 thrownewError(
 `Cannot await or return from a thenable. `+

packages/react-server-dom-unbundled/src/ReactFlightUnbundledReferences.js

@@ -182,11 +182,10 @@ const deepProxyHandlers: Proxy$traps<mixed> = {
 // $FlowFixMe[prop-missing]
 returnObject.prototype[Symbol.toStringTag];
 case'Provider':
-thrownewError(
-`Cannot render a Client Context Provider on the Server. `+
-`Instead, you can export a Client Component wrapper `+
-`that itself renders a Client Context Provider.`,
-);
+// Context.Provider === Context in React, so return the same reference.
+// This allows server components to render <ClientContext.Provider>
+// which will be serialized and executed on the client.
+returnreceiver;
 case'then':
 thrownewError(
 `Cannot await or return from a thenable. `+

packages/react-server-dom-webpack/src/ReactFlightWebpackReferences.js

@@ -182,11 +182,10 @@ const deepProxyHandlers: Proxy$traps<mixed> = {
 // $FlowFixMe[prop-missing]
 returnObject.prototype[Symbol.toStringTag];
 case'Provider':
-thrownewError(
-`Cannot render a Client Context Provider on the Server. `+
-`Instead, you can export a Client Component wrapper `+
-`that itself renders a Client Context Provider.`,
-);
+// Context.Provider === Context in React, so return the same reference.
+// This allows server components to render <ClientContext.Provider>
+// which will be serialized and executed on the client.
+returnreceiver;
 case'then':
 thrownewError(
 `Cannot await or return from a thenable. `+

packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js

@@ -787,19 +787,68 @@ describe('ReactFlightDOM', () => {
 <ClientModule.Componentkey="this adds instrumentation"/>;
 });
 
-it('throws when accessing a Context.Provider below the client exports',()=>{
+it('does not throw when accessing a Context.Provider from client exports',()=>{
 constContext=React.createContext();
 constClientModule=clientExports({
  Context,
 });
 functiondotting(){
 returnClientModule.Context.Provider;
 }
-expect(dotting).toThrowError(
-`Cannot render a Client Context Provider on the Server. `+
-`Instead, you can export a Client Component wrapper `+
-`that itself renders a Client Context Provider.`,
+expect(dotting).not.toThrowError();
+});
+
+it('can render a client Context.Provider from a server component',async()=>{
+// Create a context in a client module
+constTestContext=React.createContext('default');
+constClientModule=clientExports({
+ TestContext,
+});
+
+// Client component that reads context
+functionClientConsumer(){
+constvalue=React.useContext(TestContext);
+return<span>{value}</span>;
+}
+const{ClientConsumer: ClientConsumerRef}=clientExports({ClientConsumer});
+
+functionPrint({response}){
+returnuse(response);
+}
+
+functionApp({response}){
+return(
+<Suspensefallback={<h1>Loading...</h1>}>
+<Printresponse={response}/>
+</Suspense>
+);
+}
+
+// Server component that provides context
+functionServerApp(){
+return(
+<ClientModule.TestContext.Providervalue="from-server">
+<div>
+<ClientConsumerRef/>
+</div>
+</ClientModule.TestContext.Provider>
+);
+}
+
+const{writable, readable}=getTestStream();
+const{pipe}=awaitserverAct(()=>
+ReactServerDOMServer.renderToPipeableStream(<ServerApp/>,webpackMap),
 );
+pipe(writable);
+constresponse=ReactServerDOMClient.createFromReadableStream(readable);
+
+constcontainer=document.createElement('div');
+constroot=ReactDOMClient.createRoot(container);
+awaitact(()=>{
+root.render(<Appresponse={response}/>);
+});
+
+expect(container.innerHTML).toBe('<div><span>from-server</span></div>');
 });
 
 it('should progressively reveal server components',async()=>{

packages/react-server/src/ReactFlightServerTemporaryReferences.js

@@ -65,11 +65,10 @@ const proxyHandlers: Proxy$traps<mixed> = {
  // $FlowFixMe[prop-missing]
  return Object.prototype[Symbol.toStringTag];
  case 'Provider':
-thrownewError(
-`Cannot render a Client Context Provider on the Server. `+
-`Instead, you can export a Client Component wrapper `+
-`that itself renders a Client Context Provider.`,
-);
+ // Context.Provider === Context in React, so return the same reference.
+ // This allows server components to render <ClientContext.Provider>
+ // which will be serialized and executed on the client.
+ return receiver;
  case 'then':
  // Allow returning a temporary reference from an async function
  // Unlike regular Client References, a Promise would never have been serialized as

fixtures/flight/src/App.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import{renderToReadableStream}from'react-server-dom-unbundled/server';
 import{createFromReadableStream}from'react-server-dom-webpack/client';
 import{PassThrough,Readable}from'stream';
-
+import{ClientContext,ClientReadContext}from'./ClientContext.js';
 importContainerfrom'./Container.js';
 
 import{Counter}from'./Counter.js';
@@ -235,6 +235,11 @@ export default async function App({prerender, noCache}) {
 <Foo>{dedupedChild}</Foo>
 <Bar>{Promise.resolve([dedupedChild])}</Bar>
 <Navigate/>
+<ClientContextvalue="from server">
+<div>
+<ClientReadContext/>
+</div>
+</ClientContext>
 {prerender ? null : (// TODO: prerender is broken for large content for some reason.
 <React.Suspensefallback={null}>
 <LargeContent/>

fixtures/flight/src/ClientContext.js

@@ -0,0 +1,12 @@
+'use client';
+
+import{createContext,use}from'react';
+
+constClientContext=createContext(null);
+
+functionClientReadContext(){
+constvalue=use(ClientContext);
+return<p>{value}</p>;
+}
+
+export{ClientContext,ClientReadContext};

packages/react-reconciler/src/ReactFiberBeginWork.js

@@ -128,6 +128,7 @@ import {
 REACT_LAZY_TYPE,
 REACT_FORWARD_REF_TYPE,
 REACT_MEMO_TYPE,
+REACT_CONTEXT_TYPE,
 }from'shared/ReactSymbols';
 import{setCurrentFiber}from'./ReactCurrentFiber';
 import{
@@ -2140,6 +2141,10 @@ function mountLazyComponent(
 props,
 renderLanes,
 );
+} else if ($$typeof === REACT_CONTEXT_TYPE) {
+workInProgress.tag=ContextProvider;
+workInProgress.type=Component;
+returnupdateContextProvider(null,workInProgress,renderLanes);
 }
 }
 

packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js

@@ -116,6 +116,44 @@ describe('ReactLazy', () => {
 expect(root).toMatchRenderedOutput('Hi again');
 });
 
+it('renders a lazy context provider',async()=>{
+constContext=React.createContext('default');
+functionConsumerText(){
+return<Texttext={React.useContext(Context)}/>;
+}
+// Context.Provider === Context, so we can lazy-load the context itself
+constLazyProvider=lazy(()=>fakeImport(Context));
+
+constroot=ReactTestRenderer.create(
+<Suspensefallback={<Texttext="Loading..."/>}>
+<LazyProvidervalue="Hi">
+<ConsumerText/>
+</LazyProvider>
+</Suspense>,
+{
+unstable_isConcurrent: true,
+},
+);
+
+awaitwaitForAll(['Loading...']);
+expect(root).not.toMatchRenderedOutput('Hi');
+
+awaitact(()=>resolveFakeImport(Context));
+assertLog(['Hi']);
+expect(root).toMatchRenderedOutput('Hi');
+
+// Should not suspend on update
+root.update(
+<Suspensefallback={<Texttext="Loading..."/>}>
+<LazyProvidervalue="Hi again">
+<ConsumerText/>
+</LazyProvider>
+</Suspense>,
+);
+awaitwaitForAll(['Hi again']);
+expect(root).toMatchRenderedOutput('Hi again');
+});
+
 it('can resolve synchronously without suspending',async()=>{
 constLazyText=lazy(()=>({
 then(cb){
@@ -858,13 +896,20 @@ describe('ReactLazy', () => {
 );
 });
 
-it('throws with a useful error when wrapping Context with lazy()',async()=>{
-constContext=React.createContext(null);
-constBadLazy=lazy(()=>fakeImport(Context));
+it('renders a lazy context provider without value prop',async()=>{
+// Context providers work when wrapped in lazy()
+constContext=React.createContext('default');
+constLazyProvider=lazy(()=>fakeImport(Context));
+
+functionConsumerText(){
+return<Texttext={React.useContext(Context)}/>;
+}
 
 constroot=ReactTestRenderer.create(
 <Suspensefallback={<Texttext="Loading..."/>}>
-<BadLazy/>
+<LazyProvidervalue="provided">
+<ConsumerText/>
+</LazyProvider>
 </Suspense>,
 {
 unstable_isConcurrent: true,
@@ -873,16 +918,9 @@ describe('ReactLazy', () => {
 
 awaitwaitForAll(['Loading...']);
 
-awaitresolveFakeImport(Context);
-root.update(
-<Suspensefallback={<Texttext="Loading..."/>}>
-<BadLazy/>
-</Suspense>,
-);
-awaitwaitForThrow(
-'Element type is invalid. Received a promise that resolves to: Context. '+
-'Lazy element type must resolve to a class or function.',
-);
+awaitact(()=>resolveFakeImport(Context));
+assertLog(['provided']);
+expect(root).toMatchRenderedOutput('provided');
 });
 
 it('throws with a useful error when wrapping Context.Consumer with lazy()',async()=>{

packages/react-server-dom-turbopack/src/ReactFlightTurbopackReferences.js

@@ -182,11 +182,10 @@ const deepProxyHandlers: Proxy$traps<mixed> = {
 // $FlowFixMe[prop-missing]
 returnObject.prototype[Symbol.toStringTag];
 case'Provider':
-thrownewError(
-`Cannot render a Client Context Provider on the Server. `+
-`Instead, you can export a Client Component wrapper `+
-`that itself renders a Client Context Provider.`,
-);
+// Context.Provider === Context in React, so return the same reference.
+// This allows server components to render <ClientContext.Provider>
+// which will be serialized and executed on the client.
+returnreceiver;
 case'then':
 thrownewError(
 `Cannot await or return from a thenable. `+

packages/react-server-dom-unbundled/src/ReactFlightUnbundledReferences.js

@@ -182,11 +182,10 @@ const deepProxyHandlers: Proxy$traps<mixed> = {
 // $FlowFixMe[prop-missing]
 returnObject.prototype[Symbol.toStringTag];
 case'Provider':
-thrownewError(
-`Cannot render a Client Context Provider on the Server. `+
-`Instead, you can export a Client Component wrapper `+
-`that itself renders a Client Context Provider.`,
-);
+// Context.Provider === Context in React, so return the same reference.
+// This allows server components to render <ClientContext.Provider>
+// which will be serialized and executed on the client.
+returnreceiver;
 case'then':
 thrownewError(
 `Cannot await or return from a thenable. `+

packages/react-server-dom-webpack/src/ReactFlightWebpackReferences.js

@@ -182,11 +182,10 @@ const deepProxyHandlers: Proxy$traps<mixed> = {
 // $FlowFixMe[prop-missing]
 returnObject.prototype[Symbol.toStringTag];
 case'Provider':
-thrownewError(
-`Cannot render a Client Context Provider on the Server. `+
-`Instead, you can export a Client Component wrapper `+
-`that itself renders a Client Context Provider.`,
-);
+// Context.Provider === Context in React, so return the same reference.
+// This allows server components to render <ClientContext.Provider>
+// which will be serialized and executed on the client.
+returnreceiver;
 case'then':
 thrownewError(
 `Cannot await or return from a thenable. `+

packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js

@@ -787,19 +787,68 @@ describe('ReactFlightDOM', () => {
 <ClientModule.Componentkey="this adds instrumentation"/>;
 });
 
-it('throws when accessing a Context.Provider below the client exports',()=>{
+it('does not throw when accessing a Context.Provider from client exports',()=>{
 constContext=React.createContext();
 constClientModule=clientExports({
  Context,
 });
 functiondotting(){
 returnClientModule.Context.Provider;
 }
-expect(dotting).toThrowError(
-`Cannot render a Client Context Provider on the Server. `+
-`Instead, you can export a Client Component wrapper `+
-`that itself renders a Client Context Provider.`,
+expect(dotting).not.toThrowError();
+});
+
+it('can render a client Context.Provider from a server component',async()=>{
+// Create a context in a client module
+constTestContext=React.createContext('default');
+constClientModule=clientExports({
+ TestContext,
+});
+
+// Client component that reads context
+functionClientConsumer(){
+constvalue=React.useContext(TestContext);
+return<span>{value}</span>;
+}
+const{ClientConsumer: ClientConsumerRef}=clientExports({ClientConsumer});
+
+functionPrint({response}){
+returnuse(response);
+}
+
+functionApp({response}){
+return(
+<Suspensefallback={<h1>Loading...</h1>}>
+<Printresponse={response}/>
+</Suspense>
+);
+}
+
+// Server component that provides context
+functionServerApp(){
+return(
+<ClientModule.TestContext.Providervalue="from-server">
+<div>
+<ClientConsumerRef/>
+</div>
+</ClientModule.TestContext.Provider>
+);
+}
+
+const{writable, readable}=getTestStream();
+const{pipe}=awaitserverAct(()=>
+ReactServerDOMServer.renderToPipeableStream(<ServerApp/>,webpackMap),
 );
+pipe(writable);
+constresponse=ReactServerDOMClient.createFromReadableStream(readable);
+
+constcontainer=document.createElement('div');
+constroot=ReactDOMClient.createRoot(container);
+awaitact(()=>{
+root.render(<Appresponse={response}/>);
+});
+
+expect(container.innerHTML).toBe('<div><span>from-server</span></div>');
 });
 
 it('should progressively reveal server components',async()=>{

packages/react-server/src/ReactFlightServerTemporaryReferences.js

@@ -65,11 +65,10 @@ const proxyHandlers: Proxy$traps<mixed> = {
  // $FlowFixMe[prop-missing]
  return Object.prototype[Symbol.toStringTag];
  case 'Provider':
-thrownewError(
-`Cannot render a Client Context Provider on the Server. `+
-`Instead, you can export a Client Component wrapper `+
-`that itself renders a Client Context Provider.`,
-);
+ // Context.Provider === Context in React, so return the same reference.
+ // This allows server components to render <ClientContext.Provider>
+ // which will be serialized and executed on the client.
+ return receiver;
  case 'then':
  // Allow returning a temporary reference from an async function
  // Unlike regular Client References, a Promise would never have been serialized as

fixtures/flight/src/App.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import{renderToReadableStream}from'react-server-dom-unbundled/server';
 import{createFromReadableStream}from'react-server-dom-webpack/client';
 import{PassThrough,Readable}from'stream';
-
+import{ClientContext,ClientReadContext}from'./ClientContext.js';
 importContainerfrom'./Container.js';
 
 import{Counter}from'./Counter.js';
@@ -235,6 +235,11 @@ export default async function App({prerender, noCache}) {
 <Foo>{dedupedChild}</Foo>
 <Bar>{Promise.resolve([dedupedChild])}</Bar>
 <Navigate/>
+<ClientContextvalue="from server">
+<div>
+<ClientReadContext/>
+</div>
+</ClientContext>
 {prerender ? null : (// TODO: prerender is broken for large content for some reason.
 <React.Suspensefallback={null}>
 <LargeContent/>

fixtures/flight/src/ClientContext.js

@@ -0,0 +1,12 @@
+'use client';
+
+import{createContext,use}from'react';
+
+constClientContext=createContext(null);
+
+functionClientReadContext(){
+constvalue=use(ClientContext);
+return<p>{value}</p>;
+}
+
+export{ClientContext,ClientReadContext};

packages/react-reconciler/src/ReactFiberBeginWork.js

@@ -128,6 +128,7 @@ import {
 REACT_LAZY_TYPE,
 REACT_FORWARD_REF_TYPE,
 REACT_MEMO_TYPE,
+REACT_CONTEXT_TYPE,
 }from'shared/ReactSymbols';
 import{setCurrentFiber}from'./ReactCurrentFiber';
 import{
@@ -2140,6 +2141,10 @@ function mountLazyComponent(
 props,
 renderLanes,
 );
+} else if ($$typeof === REACT_CONTEXT_TYPE) {
+workInProgress.tag=ContextProvider;
+workInProgress.type=Component;
+returnupdateContextProvider(null,workInProgress,renderLanes);
 }
 }
 

packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js

@@ -116,6 +116,44 @@ describe('ReactLazy', () => {
 expect(root).toMatchRenderedOutput('Hi again');
 });
 
+it('renders a lazy context provider',async()=>{
+constContext=React.createContext('default');
+functionConsumerText(){
+return<Texttext={React.useContext(Context)}/>;
+}
+// Context.Provider === Context, so we can lazy-load the context itself
+constLazyProvider=lazy(()=>fakeImport(Context));
+
+constroot=ReactTestRenderer.create(
+<Suspensefallback={<Texttext="Loading..."/>}>
+<LazyProvidervalue="Hi">
+<ConsumerText/>
+</LazyProvider>
+</Suspense>,
+{
+unstable_isConcurrent: true,
+},
+);
+
+awaitwaitForAll(['Loading...']);
+expect(root).not.toMatchRenderedOutput('Hi');
+
+awaitact(()=>resolveFakeImport(Context));
+assertLog(['Hi']);
+expect(root).toMatchRenderedOutput('Hi');
+
+// Should not suspend on update
+root.update(
+<Suspensefallback={<Texttext="Loading..."/>}>
+<LazyProvidervalue="Hi again">
+<ConsumerText/>
+</LazyProvider>
+</Suspense>,
+);
+awaitwaitForAll(['Hi again']);
+expect(root).toMatchRenderedOutput('Hi again');
+});
+
 it('can resolve synchronously without suspending',async()=>{
 constLazyText=lazy(()=>({
 then(cb){
@@ -858,13 +896,20 @@ describe('ReactLazy', () => {
 );
 });
 
-it('throws with a useful error when wrapping Context with lazy()',async()=>{
-constContext=React.createContext(null);
-constBadLazy=lazy(()=>fakeImport(Context));
+it('renders a lazy context provider without value prop',async()=>{
+// Context providers work when wrapped in lazy()
+constContext=React.createContext('default');
+constLazyProvider=lazy(()=>fakeImport(Context));
+
+functionConsumerText(){
+return<Texttext={React.useContext(Context)}/>;
+}
 
 constroot=ReactTestRenderer.create(
 <Suspensefallback={<Texttext="Loading..."/>}>
-<BadLazy/>
+<LazyProvidervalue="provided">
+<ConsumerText/>
+</LazyProvider>
 </Suspense>,
 {
 unstable_isConcurrent: true,
@@ -873,16 +918,9 @@ describe('ReactLazy', () => {
 
 awaitwaitForAll(['Loading...']);
 
-awaitresolveFakeImport(Context);
-root.update(
-<Suspensefallback={<Texttext="Loading..."/>}>
-<BadLazy/>
-</Suspense>,
-);
-awaitwaitForThrow(
-'Element type is invalid. Received a promise that resolves to: Context. '+
-'Lazy element type must resolve to a class or function.',
-);
+awaitact(()=>resolveFakeImport(Context));
+assertLog(['provided']);
+expect(root).toMatchRenderedOutput('provided');
 });
 
 it('throws with a useful error when wrapping Context.Consumer with lazy()',async()=>{

packages/react-server-dom-turbopack/src/ReactFlightTurbopackReferences.js

@@ -182,11 +182,10 @@ const deepProxyHandlers: Proxy$traps<mixed> = {
 // $FlowFixMe[prop-missing]
 returnObject.prototype[Symbol.toStringTag];
 case'Provider':
-thrownewError(
-`Cannot render a Client Context Provider on the Server. `+
-`Instead, you can export a Client Component wrapper `+
-`that itself renders a Client Context Provider.`,
-);
+// Context.Provider === Context in React, so return the same reference.
+// This allows server components to render <ClientContext.Provider>
+// which will be serialized and executed on the client.
+returnreceiver;
 case'then':
 thrownewError(
 `Cannot await or return from a thenable. `+

packages/react-server-dom-unbundled/src/ReactFlightUnbundledReferences.js

@@ -182,11 +182,10 @@ const deepProxyHandlers: Proxy$traps<mixed> = {
 // $FlowFixMe[prop-missing]
 returnObject.prototype[Symbol.toStringTag];
 case'Provider':
-thrownewError(
-`Cannot render a Client Context Provider on the Server. `+
-`Instead, you can export a Client Component wrapper `+
-`that itself renders a Client Context Provider.`,
-);
+// Context.Provider === Context in React, so return the same reference.
+// This allows server components to render <ClientContext.Provider>
+// which will be serialized and executed on the client.
+returnreceiver;
 case'then':
 thrownewError(
 `Cannot await or return from a thenable. `+

packages/react-server-dom-webpack/src/ReactFlightWebpackReferences.js

@@ -182,11 +182,10 @@ const deepProxyHandlers: Proxy$traps<mixed> = {
 // $FlowFixMe[prop-missing]
 returnObject.prototype[Symbol.toStringTag];
 case'Provider':
-thrownewError(
-`Cannot render a Client Context Provider on the Server. `+
-`Instead, you can export a Client Component wrapper `+
-`that itself renders a Client Context Provider.`,
-);
+// Context.Provider === Context in React, so return the same reference.
+// This allows server components to render <ClientContext.Provider>
+// which will be serialized and executed on the client.
+returnreceiver;
 case'then':
 thrownewError(
 `Cannot await or return from a thenable. `+

packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js

@@ -787,19 +787,68 @@ describe('ReactFlightDOM', () => {
 <ClientModule.Componentkey="this adds instrumentation"/>;
 });
 
-it('throws when accessing a Context.Provider below the client exports',()=>{
+it('does not throw when accessing a Context.Provider from client exports',()=>{
 constContext=React.createContext();
 constClientModule=clientExports({
  Context,
 });
 functiondotting(){
 returnClientModule.Context.Provider;
 }
-expect(dotting).toThrowError(
-`Cannot render a Client Context Provider on the Server. `+
-`Instead, you can export a Client Component wrapper `+
-`that itself renders a Client Context Provider.`,
+expect(dotting).not.toThrowError();
+});
+
+it('can render a client Context.Provider from a server component',async()=>{
+// Create a context in a client module
+constTestContext=React.createContext('default');
+constClientModule=clientExports({
+ TestContext,
+});
+
+// Client component that reads context
+functionClientConsumer(){
+constvalue=React.useContext(TestContext);
+return<span>{value}</span>;
+}
+const{ClientConsumer: ClientConsumerRef}=clientExports({ClientConsumer});
+
+functionPrint({response}){
+returnuse(response);
+}
+
+functionApp({response}){
+return(
+<Suspensefallback={<h1>Loading...</h1>}>
+<Printresponse={response}/>
+</Suspense>
+);
+}
+
+// Server component that provides context
+functionServerApp(){
+return(
+<ClientModule.TestContext.Providervalue="from-server">
+<div>
+<ClientConsumerRef/>
+</div>
+</ClientModule.TestContext.Provider>
+);
+}
+
+const{writable, readable}=getTestStream();
+const{pipe}=awaitserverAct(()=>
+ReactServerDOMServer.renderToPipeableStream(<ServerApp/>,webpackMap),
 );
+pipe(writable);
+constresponse=ReactServerDOMClient.createFromReadableStream(readable);
+
+constcontainer=document.createElement('div');
+constroot=ReactDOMClient.createRoot(container);
+awaitact(()=>{
+root.render(<Appresponse={response}/>);
+});
+
+expect(container.innerHTML).toBe('<div><span>from-server</span></div>');
 });
 
 it('should progressively reveal server components',async()=>{

packages/react-server/src/ReactFlightServerTemporaryReferences.js

@@ -65,11 +65,10 @@ const proxyHandlers: Proxy$traps<mixed> = {
  // $FlowFixMe[prop-missing]
  return Object.prototype[Symbol.toStringTag];
  case 'Provider':
-thrownewError(
-`Cannot render a Client Context Provider on the Server. `+
-`Instead, you can export a Client Component wrapper `+
-`that itself renders a Client Context Provider.`,
-);
+ // Context.Provider === Context in React, so return the same reference.
+ // This allows server components to render <ClientContext.Provider>
+ // which will be serialized and executed on the client.
+ return receiver;
  case 'then':
  // Allow returning a temporary reference from an async function
  // Unlike regular Client References, a Promise would never have been serialized as

fixtures/flight/src/App.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import{renderToReadableStream}from'react-server-dom-unbundled/server';
 import{createFromReadableStream}from'react-server-dom-webpack/client';
 import{PassThrough,Readable}from'stream';
-
+import{ClientContext,ClientReadContext}from'./ClientContext.js';
 importContainerfrom'./Container.js';
 
 import{Counter}from'./Counter.js';
@@ -235,6 +235,11 @@ export default async function App({prerender, noCache}) {
 <Foo>{dedupedChild}</Foo>
 <Bar>{Promise.resolve([dedupedChild])}</Bar>
 <Navigate/>
+<ClientContextvalue="from server">
+<div>
+<ClientReadContext/>
+</div>
+</ClientContext>
 {prerender ? null : (// TODO: prerender is broken for large content for some reason.
 <React.Suspensefallback={null}>
 <LargeContent/>

fixtures/flight/src/ClientContext.js

@@ -0,0 +1,12 @@
+'use client';
+
+import{createContext,use}from'react';
+
+constClientContext=createContext(null);
+
+functionClientReadContext(){
+constvalue=use(ClientContext);
+return<p>{value}</p>;
+}
+
+export{ClientContext,ClientReadContext};

packages/react-reconciler/src/ReactFiberBeginWork.js

@@ -128,6 +128,7 @@ import {
 REACT_LAZY_TYPE,
 REACT_FORWARD_REF_TYPE,
 REACT_MEMO_TYPE,
+REACT_CONTEXT_TYPE,
 }from'shared/ReactSymbols';
 import{setCurrentFiber}from'./ReactCurrentFiber';
 import{
@@ -2140,6 +2141,10 @@ function mountLazyComponent(
 props,
 renderLanes,
 );
+} else if ($$typeof === REACT_CONTEXT_TYPE) {
+workInProgress.tag=ContextProvider;
+workInProgress.type=Component;
+returnupdateContextProvider(null,workInProgress,renderLanes);
 }
 }
 

packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js

@@ -116,6 +116,44 @@ describe('ReactLazy', () => {
 expect(root).toMatchRenderedOutput('Hi again');
 });
 
+it('renders a lazy context provider',async()=>{
+constContext=React.createContext('default');
+functionConsumerText(){
+return<Texttext={React.useContext(Context)}/>;
+}
+// Context.Provider === Context, so we can lazy-load the context itself
+constLazyProvider=lazy(()=>fakeImport(Context));
+
+constroot=ReactTestRenderer.create(
+<Suspensefallback={<Texttext="Loading..."/>}>
+<LazyProvidervalue="Hi">
+<ConsumerText/>
+</LazyProvider>
+</Suspense>,
+{
+unstable_isConcurrent: true,
+},
+);
+
+awaitwaitForAll(['Loading...']);
+expect(root).not.toMatchRenderedOutput('Hi');
+
+awaitact(()=>resolveFakeImport(Context));
+assertLog(['Hi']);
+expect(root).toMatchRenderedOutput('Hi');
+
+// Should not suspend on update
+root.update(
+<Suspensefallback={<Texttext="Loading..."/>}>
+<LazyProvidervalue="Hi again">
+<ConsumerText/>
+</LazyProvider>
+</Suspense>,
+);
+awaitwaitForAll(['Hi again']);
+expect(root).toMatchRenderedOutput('Hi again');
+});
+
 it('can resolve synchronously without suspending',async()=>{
 constLazyText=lazy(()=>({
 then(cb){
@@ -858,13 +896,20 @@ describe('ReactLazy', () => {
 );
 });
 
-it('throws with a useful error when wrapping Context with lazy()',async()=>{
-constContext=React.createContext(null);
-constBadLazy=lazy(()=>fakeImport(Context));
+it('renders a lazy context provider without value prop',async()=>{
+// Context providers work when wrapped in lazy()
+constContext=React.createContext('default');
+constLazyProvider=lazy(()=>fakeImport(Context));
+
+functionConsumerText(){
+return<Texttext={React.useContext(Context)}/>;
+}
 
 constroot=ReactTestRenderer.create(
 <Suspensefallback={<Texttext="Loading..."/>}>
-<BadLazy/>
+<LazyProvidervalue="provided">
+<ConsumerText/>
+</LazyProvider>
 </Suspense>,
 {
 unstable_isConcurrent: true,
@@ -873,16 +918,9 @@ describe('ReactLazy', () => {
 
 awaitwaitForAll(['Loading...']);
 
-awaitresolveFakeImport(Context);
-root.update(
-<Suspensefallback={<Texttext="Loading..."/>}>
-<BadLazy/>
-</Suspense>,
-);
-awaitwaitForThrow(
-'Element type is invalid. Received a promise that resolves to: Context. '+
-'Lazy element type must resolve to a class or function.',
-);
+awaitact(()=>resolveFakeImport(Context));
+assertLog(['provided']);
+expect(root).toMatchRenderedOutput('provided');
 });
 
 it('throws with a useful error when wrapping Context.Consumer with lazy()',async()=>{

packages/react-server-dom-turbopack/src/ReactFlightTurbopackReferences.js

@@ -182,11 +182,10 @@ const deepProxyHandlers: Proxy$traps<mixed> = {
 // $FlowFixMe[prop-missing]
 returnObject.prototype[Symbol.toStringTag];
 case'Provider':
-thrownewError(
-`Cannot render a Client Context Provider on the Server. `+
-`Instead, you can export a Client Component wrapper `+
-`that itself renders a Client Context Provider.`,
-);
+// Context.Provider === Context in React, so return the same reference.
+// This allows server components to render <ClientContext.Provider>
+// which will be serialized and executed on the client.
+returnreceiver;
 case'then':
 thrownewError(
 `Cannot await or return from a thenable. `+

packages/react-server-dom-unbundled/src/ReactFlightUnbundledReferences.js

@@ -182,11 +182,10 @@ const deepProxyHandlers: Proxy$traps<mixed> = {
 // $FlowFixMe[prop-missing]
 returnObject.prototype[Symbol.toStringTag];
 case'Provider':
-thrownewError(
-`Cannot render a Client Context Provider on the Server. `+
-`Instead, you can export a Client Component wrapper `+
-`that itself renders a Client Context Provider.`,
-);
+// Context.Provider === Context in React, so return the same reference.
+// This allows server components to render <ClientContext.Provider>
+// which will be serialized and executed on the client.
+returnreceiver;
 case'then':
 thrownewError(
 `Cannot await or return from a thenable. `+

packages/react-server-dom-webpack/src/ReactFlightWebpackReferences.js

@@ -182,11 +182,10 @@ const deepProxyHandlers: Proxy$traps<mixed> = {
 // $FlowFixMe[prop-missing]
 returnObject.prototype[Symbol.toStringTag];
 case'Provider':
-thrownewError(
-`Cannot render a Client Context Provider on the Server. `+
-`Instead, you can export a Client Component wrapper `+
-`that itself renders a Client Context Provider.`,
-);
+// Context.Provider === Context in React, so return the same reference.
+// This allows server components to render <ClientContext.Provider>
+// which will be serialized and executed on the client.
+returnreceiver;
 case'then':
 thrownewError(
 `Cannot await or return from a thenable. `+

packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js

@@ -787,19 +787,68 @@ describe('ReactFlightDOM', () => {
 <ClientModule.Componentkey="this adds instrumentation"/>;
 });
 
-it('throws when accessing a Context.Provider below the client exports',()=>{
+it('does not throw when accessing a Context.Provider from client exports',()=>{
 constContext=React.createContext();
 constClientModule=clientExports({
  Context,
 });
 functiondotting(){
 returnClientModule.Context.Provider;
 }
-expect(dotting).toThrowError(
-`Cannot render a Client Context Provider on the Server. `+
-`Instead, you can export a Client Component wrapper `+
-`that itself renders a Client Context Provider.`,
+expect(dotting).not.toThrowError();
+});
+
+it('can render a client Context.Provider from a server component',async()=>{
+// Create a context in a client module
+constTestContext=React.createContext('default');
+constClientModule=clientExports({
+ TestContext,
+});
+
+// Client component that reads context
+functionClientConsumer(){
+constvalue=React.useContext(TestContext);
+return<span>{value}</span>;
+}
+const{ClientConsumer: ClientConsumerRef}=clientExports({ClientConsumer});
+
+functionPrint({response}){
+returnuse(response);
+}
+
+functionApp({response}){
+return(
+<Suspensefallback={<h1>Loading...</h1>}>
+<Printresponse={response}/>
+</Suspense>
+);
+}
+
+// Server component that provides context
+functionServerApp(){
+return(
+<ClientModule.TestContext.Providervalue="from-server">
+<div>
+<ClientConsumerRef/>
+</div>
+</ClientModule.TestContext.Provider>
+);
+}
+
+const{writable, readable}=getTestStream();
+const{pipe}=awaitserverAct(()=>
+ReactServerDOMServer.renderToPipeableStream(<ServerApp/>,webpackMap),
 );
+pipe(writable);
+constresponse=ReactServerDOMClient.createFromReadableStream(readable);
+
+constcontainer=document.createElement('div');
+constroot=ReactDOMClient.createRoot(container);
+awaitact(()=>{
+root.render(<Appresponse={response}/>);
+});
+
+expect(container.innerHTML).toBe('<div><span>from-server</span></div>');
 });
 
 it('should progressively reveal server components',async()=>{

packages/react-server/src/ReactFlightServerTemporaryReferences.js

@@ -65,11 +65,10 @@ const proxyHandlers: Proxy$traps<mixed> = {
  // $FlowFixMe[prop-missing]
  return Object.prototype[Symbol.toStringTag];
  case 'Provider':
-thrownewError(
-`Cannot render a Client Context Provider on the Server. `+
-`Instead, you can export a Client Component wrapper `+
-`that itself renders a Client Context Provider.`,
-);
+ // Context.Provider === Context in React, so return the same reference.
+ // This allows server components to render <ClientContext.Provider>
+ // which will be serialized and executed on the client.
+ return receiver;
  case 'then':
  // Allow returning a temporary reference from an async function
  // Unlike regular Client References, a Promise would never have been serialized as

fixtures/flight/src/App.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import{renderToReadableStream}from'react-server-dom-unbundled/server';
 import{createFromReadableStream}from'react-server-dom-webpack/client';
 import{PassThrough,Readable}from'stream';
-
+import{ClientContext,ClientReadContext}from'./ClientContext.js';
 importContainerfrom'./Container.js';
 
 import{Counter}from'./Counter.js';
@@ -235,6 +235,11 @@ export default async function App({prerender, noCache}) {
 <Foo>{dedupedChild}</Foo>
 <Bar>{Promise.resolve([dedupedChild])}</Bar>
 <Navigate/>
+<ClientContextvalue="from server">
+<div>
+<ClientReadContext/>
+</div>
+</ClientContext>
 {prerender ? null : (// TODO: prerender is broken for large content for some reason.
 <React.Suspensefallback={null}>
 <LargeContent/>

fixtures/flight/src/ClientContext.js

@@ -0,0 +1,12 @@
+'use client';
+
+import{createContext,use}from'react';
+
+constClientContext=createContext(null);
+
+functionClientReadContext(){
+constvalue=use(ClientContext);
+return<p>{value}</p>;
+}
+
+export{ClientContext,ClientReadContext};

packages/react-reconciler/src/ReactFiberBeginWork.js

@@ -128,6 +128,7 @@ import {
 REACT_LAZY_TYPE,
 REACT_FORWARD_REF_TYPE,
 REACT_MEMO_TYPE,
+REACT_CONTEXT_TYPE,
 }from'shared/ReactSymbols';
 import{setCurrentFiber}from'./ReactCurrentFiber';
 import{
@@ -2140,6 +2141,10 @@ function mountLazyComponent(
 props,
 renderLanes,
 );
+} else if ($$typeof === REACT_CONTEXT_TYPE) {
+workInProgress.tag=ContextProvider;
+workInProgress.type=Component;
+returnupdateContextProvider(null,workInProgress,renderLanes);
 }
 }
 

packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js

@@ -116,6 +116,44 @@ describe('ReactLazy', () => {
 expect(root).toMatchRenderedOutput('Hi again');
 });
 
+it('renders a lazy context provider',async()=>{
+constContext=React.createContext('default');
+functionConsumerText(){
+return<Texttext={React.useContext(Context)}/>;
+}
+// Context.Provider === Context, so we can lazy-load the context itself
+constLazyProvider=lazy(()=>fakeImport(Context));
+
+constroot=ReactTestRenderer.create(
+<Suspensefallback={<Texttext="Loading..."/>}>
+<LazyProvidervalue="Hi">
+<ConsumerText/>
+</LazyProvider>
+</Suspense>,
+{
+unstable_isConcurrent: true,
+},
+);
+
+awaitwaitForAll(['Loading...']);
+expect(root).not.toMatchRenderedOutput('Hi');
+
+awaitact(()=>resolveFakeImport(Context));
+assertLog(['Hi']);
+expect(root).toMatchRenderedOutput('Hi');
+
+// Should not suspend on update
+root.update(
+<Suspensefallback={<Texttext="Loading..."/>}>
+<LazyProvidervalue="Hi again">
+<ConsumerText/>
+</LazyProvider>
+</Suspense>,
+);
+awaitwaitForAll(['Hi again']);
+expect(root).toMatchRenderedOutput('Hi again');
+});
+
 it('can resolve synchronously without suspending',async()=>{
 constLazyText=lazy(()=>({
 then(cb){
@@ -858,13 +896,20 @@ describe('ReactLazy', () => {
 );
 });
 
-it('throws with a useful error when wrapping Context with lazy()',async()=>{
-constContext=React.createContext(null);
-constBadLazy=lazy(()=>fakeImport(Context));
+it('renders a lazy context provider without value prop',async()=>{
+// Context providers work when wrapped in lazy()
+constContext=React.createContext('default');
+constLazyProvider=lazy(()=>fakeImport(Context));
+
+functionConsumerText(){
+return<Texttext={React.useContext(Context)}/>;
+}
 
 constroot=ReactTestRenderer.create(
 <Suspensefallback={<Texttext="Loading..."/>}>
-<BadLazy/>
+<LazyProvidervalue="provided">
+<ConsumerText/>
+</LazyProvider>
 </Suspense>,
 {
 unstable_isConcurrent: true,
@@ -873,16 +918,9 @@ describe('ReactLazy', () => {
 
 awaitwaitForAll(['Loading...']);
 
-awaitresolveFakeImport(Context);
-root.update(
-<Suspensefallback={<Texttext="Loading..."/>}>
-<BadLazy/>
-</Suspense>,
-);
-awaitwaitForThrow(
-'Element type is invalid. Received a promise that resolves to: Context. '+
-'Lazy element type must resolve to a class or function.',
-);
+awaitact(()=>resolveFakeImport(Context));
+assertLog(['provided']);
+expect(root).toMatchRenderedOutput('provided');
 });
 
 it('throws with a useful error when wrapping Context.Consumer with lazy()',async()=>{

packages/react-server-dom-turbopack/src/ReactFlightTurbopackReferences.js

@@ -182,11 +182,10 @@ const deepProxyHandlers: Proxy$traps<mixed> = {
 // $FlowFixMe[prop-missing]
 returnObject.prototype[Symbol.toStringTag];
 case'Provider':
-thrownewError(
-`Cannot render a Client Context Provider on the Server. `+
-`Instead, you can export a Client Component wrapper `+
-`that itself renders a Client Context Provider.`,
-);
+// Context.Provider === Context in React, so return the same reference.
+// This allows server components to render <ClientContext.Provider>
+// which will be serialized and executed on the client.
+returnreceiver;
 case'then':
 thrownewError(
 `Cannot await or return from a thenable. `+

packages/react-server-dom-unbundled/src/ReactFlightUnbundledReferences.js

@@ -182,11 +182,10 @@ const deepProxyHandlers: Proxy$traps<mixed> = {
 // $FlowFixMe[prop-missing]
 returnObject.prototype[Symbol.toStringTag];
 case'Provider':
-thrownewError(
-`Cannot render a Client Context Provider on the Server. `+
-`Instead, you can export a Client Component wrapper `+
-`that itself renders a Client Context Provider.`,
-);
+// Context.Provider === Context in React, so return the same reference.
+// This allows server components to render <ClientContext.Provider>
+// which will be serialized and executed on the client.
+returnreceiver;
 case'then':
 thrownewError(
 `Cannot await or return from a thenable. `+

packages/react-server-dom-webpack/src/ReactFlightWebpackReferences.js

@@ -182,11 +182,10 @@ const deepProxyHandlers: Proxy$traps<mixed> = {
 // $FlowFixMe[prop-missing]
 returnObject.prototype[Symbol.toStringTag];
 case'Provider':
-thrownewError(
-`Cannot render a Client Context Provider on the Server. `+
-`Instead, you can export a Client Component wrapper `+
-`that itself renders a Client Context Provider.`,
-);
+// Context.Provider === Context in React, so return the same reference.
+// This allows server components to render <ClientContext.Provider>
+// which will be serialized and executed on the client.
+returnreceiver;
 case'then':
 thrownewError(
 `Cannot await or return from a thenable. `+

packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js

@@ -787,19 +787,68 @@ describe('ReactFlightDOM', () => {
 <ClientModule.Componentkey="this adds instrumentation"/>;
 });
 
-it('throws when accessing a Context.Provider below the client exports',()=>{
+it('does not throw when accessing a Context.Provider from client exports',()=>{
 constContext=React.createContext();
 constClientModule=clientExports({
  Context,
 });
 functiondotting(){
 returnClientModule.Context.Provider;
 }
-expect(dotting).toThrowError(
-`Cannot render a Client Context Provider on the Server. `+
-`Instead, you can export a Client Component wrapper `+
-`that itself renders a Client Context Provider.`,
+expect(dotting).not.toThrowError();
+});
+
+it('can render a client Context.Provider from a server component',async()=>{
+// Create a context in a client module
+constTestContext=React.createContext('default');
+constClientModule=clientExports({
+ TestContext,
+});
+
+// Client component that reads context
+functionClientConsumer(){
+constvalue=React.useContext(TestContext);
+return<span>{value}</span>;
+}
+const{ClientConsumer: ClientConsumerRef}=clientExports({ClientConsumer});
+
+functionPrint({response}){
+returnuse(response);
+}
+
+functionApp({response}){
+return(
+<Suspensefallback={<h1>Loading...</h1>}>
+<Printresponse={response}/>
+</Suspense>
+);
+}
+
+// Server component that provides context
+functionServerApp(){
+return(
+<ClientModule.TestContext.Providervalue="from-server">
+<div>
+<ClientConsumerRef/>
+</div>
+</ClientModule.TestContext.Provider>
+);
+}
+
+const{writable, readable}=getTestStream();
+const{pipe}=awaitserverAct(()=>
+ReactServerDOMServer.renderToPipeableStream(<ServerApp/>,webpackMap),
 );
+pipe(writable);
+constresponse=ReactServerDOMClient.createFromReadableStream(readable);
+
+constcontainer=document.createElement('div');
+constroot=ReactDOMClient.createRoot(container);
+awaitact(()=>{
+root.render(<Appresponse={response}/>);
+});
+
+expect(container.innerHTML).toBe('<div><span>from-server</span></div>');
 });
 
 it('should progressively reveal server components',async()=>{

packages/react-server/src/ReactFlightServerTemporaryReferences.js

@@ -65,11 +65,10 @@ const proxyHandlers: Proxy$traps<mixed> = {
  // $FlowFixMe[prop-missing]
  return Object.prototype[Symbol.toStringTag];
  case 'Provider':
-thrownewError(
-`Cannot render a Client Context Provider on the Server. `+
-`Instead, you can export a Client Component wrapper `+
-`that itself renders a Client Context Provider.`,
-);
+ // Context.Provider === Context in React, so return the same reference.
+ // This allows server components to render <ClientContext.Provider>
+ // which will be serialized and executed on the client.
+ return receiver;
  case 'then':
  // Allow returning a temporary reference from an async function
  // Unlike regular Client References, a Promise would never have been serialized as