avoid direct react client api imports in the server

vercel · Sep 19, 2022 · e35f851 · e35f851
1 parent c742c03
commit e35f851
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 6 deletions.
diff --git 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
@@ -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
 )