fix: Server side rendering error for react 18

acasazza · malessani · commit 63e92e375d9e · 2023-02-27T12:50:04.000+01:00
diff --git a/components/composite/Checkout/index.tsx b/components/composite/Checkout/index.tsx
@@ -53,6 +53,7 @@ const Checkout: React.FC<Props> = ({
   privacyUrl,
 }) => {
   const ctx = useContext(AppContext)
+  console.log('ctx', ctx)
   const { query } = useRouter()
 
   let paypalPayerId = ""
@@ -142,14 +143,15 @@ const Checkout: React.FC<Props> = ({
                     <StepCustomer className="mb-6" step={1} />
                   </AccordionItem>
                 </AccordionProvider>
-                {ctx.isShipmentRequired && (
+                <>{ctx.isShipmentRequired && (
                   <AccordionProvider
                     activeStep={activeStep}
                     lastActivableStep={lastActivableStep}
                     setActiveStep={setActiveStep}
                     step="Shipping"
                     steps={steps}
                     isStepRequired={ctx.isShipmentRequired}
+                    isStepDone={ctx.hasShippingMethod}
                   >
                     <AccordionItem
                       index={2}
@@ -160,7 +162,7 @@ const Checkout: React.FC<Props> = ({
                       <StepShipping className="mb-6" step={2} />
                     </AccordionItem>
                   </AccordionProvider>
-                )}
+                )}</>
                 <AccordionProvider
                   activeStep={activeStep}
                   lastActivableStep={lastActivableStep}
diff --git a/components/composite/ErrorContainer/index.tsx b/components/composite/ErrorContainer/index.tsx
@@ -4,7 +4,7 @@ import { Footer } from "components/ui/Footer"
 
 import { Wrapper, LogoWrapper, FullLogo, Main, Error } from "./styled"
 
-export const ErrorContainer: React.FC = ({ children }) => {
+export const ErrorContainer = ({ children }: { children: JSX.Element[] | JSX.Element | null }) => {
   return (
     <Base>
       <Container>
diff --git a/components/composite/StepComplete/index.tsx b/components/composite/StepComplete/index.tsx
@@ -143,7 +143,7 @@ export const StepComplete: React.FC<Props> = ({
                       />
                     </RecapBox>
                   </div>
-                  {ctx.isShipmentRequired && (
+                  <>{ctx.isShipmentRequired && (
                     <div data-testid="shipping-address-recap">
                       <RecapItemTitle>
                         {t("stepComplete.ship_to")}
@@ -163,7 +163,7 @@ export const StepComplete: React.FC<Props> = ({
                         />
                       </RecapBox>
                     </div>
-                  )}
+                  )}</>
                 </AddressContainer>
               </RecapCol>
 
diff --git a/components/composite/StepCustomer/AddressSectionSaveForm/index.tsx b/components/composite/StepCustomer/AddressSectionSaveForm/index.tsx
@@ -1,7 +1,11 @@
 import styled from "styled-components"
 import tw from "twin.macro"
 
-export const AddressSectionSaveForm: React.FC = ({ children }) => {
+interface Props {
+  children?: JSX.Element[] | JSX.Element
+}
+
+export const AddressSectionSaveForm = ({ children }: Props): JSX.Element => {
   return <Wrapper>{children}</Wrapper>
 }
 const Wrapper = styled.div`
diff --git a/components/composite/StepCustomer/AddressSectionTitle/index.tsx b/components/composite/StepCustomer/AddressSectionTitle/index.tsx
@@ -1,7 +1,11 @@
 import styled from "styled-components"
 import tw from "twin.macro"
 
-export const AddressSectionTitle: React.FC = ({ children, ...rest }) => {
+interface Props {
+  children?: JSX.Element[] | JSX.Element
+}
+
+export const AddressSectionTitle = ({ children, ...rest }: Props): JSX.Element => {
   return <Wrapper {...rest}>{children}</Wrapper>
 }
 
diff --git a/components/composite/StepCustomer/index.tsx b/components/composite/StepCustomer/index.tsx
@@ -1,6 +1,6 @@
 import type { Order } from "@commercelayer/sdk"
 import classNames from "classnames"
-import { Fragment, useContext, useEffect, useState } from "react"
+import { useContext, useEffect, useState } from "react"
 import { useTranslation } from "react-i18next"
 
 import { AccordionContext } from "components/data/AccordionProvider"
@@ -138,8 +138,9 @@ export const StepCustomer: React.FC<Props> = () => {
       })}
     >
       <StepContent>
+        <>
         {accordionCtx.isActive && (
-          <Fragment>
+          <>
             {isGuest ? (
               <CheckoutAddresses
                 shippingAddress={shippingAddress}
@@ -174,8 +175,9 @@ export const StepCustomer: React.FC<Props> = () => {
                 handleSave={handleSave}
               />
             )}
-          </Fragment>
+          </>
         )}
+        </>
       </StepContent>
     </StepContainer>
   )
diff --git a/components/composite/StepPayment/index.tsx b/components/composite/StepPayment/index.tsx
@@ -130,6 +130,7 @@ export const StepPayment: React.FC = () => {
       })}
     >
       <StepContent>
+        <>
         {accordionCtx.isActive && (
           <div>
             {isPaymentRequired ? (
@@ -153,6 +154,7 @@ export const StepPayment: React.FC = () => {
             )}
           </div>
         )}
+        </>
       </StepContent>
     </StepContainer>
   )
diff --git a/components/composite/StepShipping/index.tsx b/components/composite/StepShipping/index.tsx
@@ -103,7 +103,7 @@ export const StepShipping: React.FC<Props> = () => {
   const appCtx = useContext(AppContext)
   const accordionCtx = useContext(AccordionContext)
   const gtmCtx = useContext(GTMContext)
-
+  console.log(accordionCtx)
   const { t } = useTranslation()
 
   if (!appCtx || !accordionCtx) {
@@ -166,6 +166,7 @@ export const StepShipping: React.FC<Props> = () => {
     if (gtmCtx?.fireAddShippingInfo) {
       await gtmCtx.fireAddShippingInfo()
     }
+    console.log('order', order)
     appCtx.autoSelectShippingMethod(order)
   }
 
@@ -178,6 +179,8 @@ export const StepShipping: React.FC<Props> = () => {
       })}
     >
       <StepContent>
+        <>
+        
         {isShipmentRequired && (
           <div>
             {accordionCtx.isActive && (
@@ -369,6 +372,7 @@ export const StepShipping: React.FC<Props> = () => {
             )}
           </div>
         )}
+        </>
       </StepContent>
     </StepContainer>
   )
diff --git a/components/data/AccordionProvider/index.tsx b/components/data/AccordionProvider/index.tsx
@@ -23,6 +23,7 @@ interface AccordionProviderProps {
   setActiveStep?: (step: SingleStepEnum) => void
   isStepRequired?: boolean
   isStepDone?: boolean
+  children?: JSX.Element[] | JSX.Element | null
 }
 
 export const AccordionProvider: React.FC<AccordionProviderProps> = ({
diff --git a/components/data/AppProvider/index.tsx b/components/data/AppProvider/index.tsx
@@ -85,6 +85,7 @@ interface AppProviderProps {
   slug: string
   orderId: string
   accessToken: string
+  children?: JSX.Element[] | JSX.Element | null
 }
 
 export const AppProvider: React.FC<AppProviderProps> = ({
@@ -215,14 +216,14 @@ export const AppProvider: React.FC<AppProviderProps> = ({
 
   const autoSelectShippingMethod = async (order?: Order) => {
     dispatch({ type: ActionType.START_LOADING })
-
     const currentOrder = order ?? (await fetchOrder(cl, orderId))
     const others = calculateSettings(
       currentOrder,
       state.isShipmentRequired,
       state.customerAddresses
     )
-
+    console.log('others', others)
+    debugger
     dispatch({
       type: ActionType.SAVE_SHIPMENTS,
       payload: {
diff --git a/components/layouts/LayoutDefault.tsx b/components/layouts/LayoutDefault.tsx
@@ -6,8 +6,8 @@ import { Card } from "components/ui/Card"
 import { Container } from "components/ui/Container"
 
 interface Props {
-  aside: React.ReactNode
-  main: React.ReactNode
+  aside: JSX.Element[] | JSX.Element | null
+  main: JSX.Element[] | JSX.Element | null
 }
 
 export const LayoutDefault: React.FC<Props> = ({ main, aside }) => {
diff --git a/components/ui/Accordion/index.tsx b/components/ui/Accordion/index.tsx
@@ -9,13 +9,14 @@ import { AppContext } from "components/data/AppProvider"
 interface Props {
   index: number
   header: ReactNode
+  children?: JSX.Element[] | JSX.Element
 }
 
-export const Accordion: React.FC = ({ children }) => {
+export const Accordion = ({ children }: { children?: JSX.Element[] | JSX.Element | null }) => {
   return <Wrapper>{children}</Wrapper>
 }
 
-export const AccordionItem: React.FC<Props> = ({ children, index, header }) => {
+export const AccordionItem = ({ children, index, header }: Props) => {
   const ctx = useContext(AccordionContext)
   const appCtx = useContext(AppContext)
 
diff --git a/components/ui/Base/index.tsx b/components/ui/Base/index.tsx
@@ -1,7 +1,7 @@
 import styled from "styled-components"
 import tw from "twin.macro"
 
-export const Base: React.FC = ({ children }) => <Wrapper>{children}</Wrapper>
+export const Base = ({ children }: { children?: JSX.Element[] | JSX.Element }) => <Wrapper>{children}</Wrapper>
 
 const Wrapper = styled.div`
   ${tw`bg-gray-50 min-h-screen w-auto`}
diff --git a/components/ui/Card/index.tsx b/components/ui/Card/index.tsx
@@ -5,6 +5,7 @@ interface Props {
   className?: string
   rounded?: boolean
   fullHeight?: boolean
+  children?: JSX.Element[] | JSX.Element | null
 }
 
 export const Card: React.FC<Props> = ({
diff --git a/components/ui/CardAddress/index.tsx b/components/ui/CardAddress/index.tsx
@@ -4,6 +4,7 @@ import tw from "twin.macro"
 interface Props {
   className?: string
   rounded?: boolean
+  children?: JSX.Element[] | JSX.Element | null
   // address: string
   // user: string
 }
diff --git a/components/ui/Container/index.tsx b/components/ui/Container/index.tsx
@@ -1,7 +1,7 @@
 import styled from "styled-components"
 import tw from "twin.macro"
 
-export const Container: React.FC = ({ children }) => <Fluid>{children}</Fluid>
+export const Container = ({ children }: { children?: JSX.Element[] | JSX.Element | null }) => <Fluid>{children}</Fluid>
 
 const Fluid = styled.div`
   ${tw`container 2xl:max-w-screen-2xl 2xl:mx-auto`}
diff --git a/components/ui/FlexContainer/index.tsx b/components/ui/FlexContainer/index.tsx
@@ -3,6 +3,7 @@ import tw from "twin.macro"
 
 interface Props {
   className?: string
+  children?: JSX.Element[] | JSX.Element | null
 }
 
 export const FlexContainer: React.FC<Props> = ({ children, className }) => (
diff --git a/components/ui/GridContainer/index.tsx b/components/ui/GridContainer/index.tsx
@@ -3,9 +3,10 @@ import tw from "twin.macro"
 
 interface Props {
   className?: string
+  children?: JSX.Element[] | JSX.Element
 }
 
-export const GridContainer: React.FC<Props> = ({ children, className }) => (
+export const GridContainer = ({ children, className }: Props): JSX.Element => (
   <Wrapper className={className}>{children}</Wrapper>
 )
 
diff --git a/components/ui/Label/index.tsx b/components/ui/Label/index.tsx
@@ -5,6 +5,7 @@ interface Props {
   dataTestId?: string
   htmlFor: string
   textLabel?: string
+  children?: JSX.Element[] | JSX.Element | null
 }
 
 export const Label: React.FC<Props> = ({
diff --git a/components/ui/StepContainer/index.tsx b/components/ui/StepContainer/index.tsx
@@ -3,6 +3,7 @@ import tw from "twin.macro"
 
 interface Props {
   className: string
+  children?: JSX.Element[] | JSX.Element | null
 }
 
 export const StepContainer: React.FC<Props> = ({ children, className }) => (
diff --git a/components/ui/StepContent/index.tsx b/components/ui/StepContent/index.tsx
@@ -1,7 +1,7 @@
 import styled from "styled-components"
 import tw from "twin.macro"
 
-export const StepContent: React.FC = ({ children }) => {
+export const StepContent = ({ children }: { children?: JSX.Element[] | JSX.Element | null }) => {
   return <Wrapper>{children}</Wrapper>
 }
 
diff --git a/components/ui/StepHeader/index.tsx b/components/ui/StepHeader/index.tsx
@@ -24,7 +24,7 @@ export const StepHeader: React.FC<Props> = ({
           <Badge status={status} stepNumber={stepNumber} />
           <Title data-testid="step-header-customer">{label}</Title>
         </Top>
-        <Info data-testid="step-header-info">{info}</Info>
+        <Info data-testid="step-header-info">{info as any}</Info>
       </Body>
     </Wrapper>
   )
diff --git a/next.config.js b/next.config.js
@@ -4,6 +4,7 @@ const shouldAnalyzeBundles = process.env.ANALYZE === "true"
 
 /** @type { import('next').NextConfig } */
 let nextConfig = {
+  reactStrictMode: true,
   compiler: {
     styledComponents: true,
   },
diff --git a/package.json b/package.json
@@ -74,15 +74,15 @@
     "@commercelayer/react-components": "4.2.1-beta.4",
     "@commercelayer/sdk": "^4.21.0",
     "@faker-js/faker": "^7.6.0",
-    "@headlessui/react": "^1.7.7",
+    "@headlessui/react": "^1.7.8",
     "@next/bundle-analyzer": "^12.3.4",
     "@next/eslint-plugin-next": "^12.3.4",
     "@playwright/test": "^1.30.0",
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/line-clamp": "^0.4.2",
-    "@types/async-retry": "1.4.3",
-    "@types/node": "^17.0.40",
-    "@types/react": "17.0.49",
+    "@types/async-retry": "1.4.5",
+    "@types/node": "^18.11.18",
+    "@types/react": "18.0.27",
     "@types/react-gtm-module": "^2.0.1",
     "@types/styled-components": "^5.1.25",
     "async-retry": "^1.3.3",
@@ -111,17 +111,17 @@
     "@semantic-release/github": "^8.0.7",
     "@semantic-release/npm": "^9.0.2",
     "@semantic-release/release-notes-generator": "^10.0.3",
-    "@typescript-eslint/eslint-plugin": "^5.49.0",
-    "@typescript-eslint/parser": "^5.49.0",
-    "eslint": "^8.32.0",
-    "eslint-config-next": "^12.3.4",
+    "@typescript-eslint/eslint-plugin": "^5.50.0",
+    "@typescript-eslint/parser": "^5.50.0",
+    "eslint": "^8.33.0",
+    "eslint-config-next": "^13.1.6",
     "eslint-config-prettier": "^8.6.0",
-    "eslint-config-standard": "16.0.3",
+    "eslint-config-standard": "17.0.0",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-react": "^7.32.1",
+    "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-tailwind": "^0.2.1",
     "prettier": "^2.8.3",
     "serve": "^14.1.2",
diff --git a/pages/_app.page.tsx b/pages/_app.page.tsx
@@ -4,12 +4,16 @@ import "../styles/globals.css"
 import { appWithTranslation } from "next-i18next"
 
 import "components/data/i18n"
+import { useEffect, useState } from "react"
 
 function CheckoutApp(props: AppProps) {
   const { Component, pageProps } = props
-  const child =
-    typeof window === "undefined" ? null : <Component {...pageProps} />
-  return <div suppressHydrationWarning>{child}</div>
+  const [browser, setBrowser] = useState(false)
+  useEffect(() => {
+    if (typeof window !== "undefined") setBrowser(true)
+  }, [])
+  
+  return browser ? <Component {...pageProps} /> : null
 }
 
 export default appWithTranslation(CheckoutApp)
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -23,6 +23,7 @@ interface AccordionProviderProps {`
`23`	`23`	`setActiveStep?: (step: SingleStepEnum) => void`
`24`	`24`	`isStepRequired?: boolean`
`25`	`25`	`isStepDone?: boolean`
	`26`	`+ children?: JSX.Element[] \| JSX.Element \| null`
`26`	`27`	`}`
`27`	`28`
`28`	`29`	`export const AccordionProvider: React.FC<AccordionProviderProps> = ({`