From e35f851e25baafba1c613fee68592b62a09c9db0 Mon Sep 17 00:00:00 2001
From: Shu Ding <g@shud.in>
Date: Mon, 19 Sep 2022 17:38:31 +0200
Subject: [PATCH 1/2] avoid direct react client api imports in the server

---
 packages/next/pages/_document.tsx          | 10 ++++++----
 packages/next/shared/lib/flush-effects.tsx |  4 ++--
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/next/pages/_document.tsx b/packages/next/pages/_document.tsx
index 9d601b89bd557..ccb51244e361d 100644
--- a/packages/next/pages/_document.tsx
+++ b/packages/next/pages/_document.tsx
@@ -1,4 +1,4 @@
-import React, { Component, ReactElement, ReactNode, useContext } from 'react'
+import React, { ReactElement, ReactNode, useContext } from 'react'
 import {
   OPTIMIZED_FONT_PROVIDERS,
   NEXT_BUILTIN_DOCUMENT,
@@ -353,7 +353,7 @@ function getAmpPath(ampPath: string, asPath: string): string {
   return ampPath || `${asPath}${asPath.includes('?') ? '&' : '?'}amp=1`
 }
 
-export class Head extends Component<HeadProps> {
+export class Head extends React.Component<HeadProps> {
   static contextType = HtmlContext
 
   context!: React.ContextType<typeof HtmlContext>
@@ -899,7 +899,7 @@ function handleDocumentScriptLoaderItems(
   __NEXT_DATA__.scriptLoader = scriptLoaderItems
 }
 
-export class NextScript extends Component<OriginProps> {
+export class NextScript extends React.Component<OriginProps> {
   static contextType = HtmlContext
 
   context!: React.ContextType<typeof HtmlContext>
@@ -1104,7 +1104,9 @@ export function Main() {
  * `Document` component handles the initial `document` markup and renders only on the server side.
  * Commonly used for implementing server side rendering for `css-in-js` libraries.
  */
-export default class Document<P = {}> extends Component<DocumentProps & P> {
+export default class Document<P = {}> extends React.Component<
+  DocumentProps & P
+> {
   /**
    * `getInitialProps` hook returns the context object with the addition of `renderPage`.
    * `renderPage` callback executes `React` rendering logic synchronously to support server-rendering wrappers
diff --git a/packages/next/shared/lib/flush-effects.tsx b/packages/next/shared/lib/flush-effects.tsx
index 4aae4f1d73ff4..aed0494b7460e 100644
--- a/packages/next/shared/lib/flush-effects.tsx
+++ b/packages/next/shared/lib/flush-effects.tsx
@@ -1,8 +1,8 @@
-import React, { createContext, useContext } from 'react'
+import React, { useContext } from 'react'
 
 export type FlushEffectsHook = (callbacks: () => React.ReactNode) => void
 
-export const FlushEffectsContext = createContext<FlushEffectsHook | null>(
+export const FlushEffectsContext = React.createContext<FlushEffectsHook | null>(
   null as any
 )
 

From ff69d2490fbe56ac7e5b30494fd58b756ce6a882 Mon Sep 17 00:00:00 2001
From: Shu Ding <g@shud.in>
Date: Mon, 19 Sep 2022 19:47:07 +0200
Subject: [PATCH 2/2] add comments

---
 packages/next/pages/_document.tsx          | 6 ++++++
 packages/next/shared/lib/flush-effects.tsx | 6 ++++++
 2 files changed, 12 insertions(+)

diff --git a/packages/next/pages/_document.tsx b/packages/next/pages/_document.tsx
index ccb51244e361d..26564e04cc50b 100644
--- a/packages/next/pages/_document.tsx
+++ b/packages/next/pages/_document.tsx
@@ -353,6 +353,12 @@ function getAmpPath(ampPath: string, asPath: string): string {
   return ampPath || `${asPath}${asPath.includes('?') ? '&' : '?'}amp=1`
 }
 
+// Use `React.Component` to avoid errors from the RSC checks because
+// it can't be imported directly in Server Components:
+//
+//   import { Component } from 'react'
+//
+// More info: https://github.com/vercel/next.js/pull/40686
 export class Head extends React.Component<HeadProps> {
   static contextType = HtmlContext
 
diff --git a/packages/next/shared/lib/flush-effects.tsx b/packages/next/shared/lib/flush-effects.tsx
index aed0494b7460e..7d9a0c1ae42d0 100644
--- a/packages/next/shared/lib/flush-effects.tsx
+++ b/packages/next/shared/lib/flush-effects.tsx
@@ -2,6 +2,12 @@ import React, { useContext } from 'react'
 
 export type FlushEffectsHook = (callbacks: () => React.ReactNode) => void
 
+// Use `React.createContext` to avoid errors from the RSC checks because
+// it can't be imported directly in Server Components:
+//
+//   import { createContext } from 'react'
+//
+// More info: https://github.com/vercel/next.js/pull/40686
 export const FlushEffectsContext = React.createContext<FlushEffectsHook | null>(
   null as any
 )