React 18 Third Party Component Rendering Issue

React 18 Third Party Component Rendering Issue

If you ever run into a build error with any package that looks like this:

12:06:28 PM: $ yarn build
12:06:28 PM: yarn run v1.22.10
12:06:28 PM: $ next build
12:06:28 PM: info  - Checking validity of types...
12:06:32 PM: Failed to compile.
12:06:32 PM:
12:06:32 PM: ./pages/_app.tsx:6:11
12:06:32 PM: Type error: 'Component' cannot be used as a JSX component.
12:06:32 PM:   Its element type 'ReactElement<any, any> | Component<{}, any, any> | null' is not a valid JSX element.
12:06:32 PM:     Type 'Component<{}, any, any>' is not assignable to type 'Element | ElementClass | null'.
12:06:32 PM:       Type 'Component<{}, any, any>' is not assignable to type 'ElementClass'.
12:06:32 PM:         The types returned by 'render()' are incompatible between these types.
12:06:32 PM:           Type 'React.ReactNode' is not assignable to type 'import("/opt/build/repo/node_modules/@types/react-syntax-highlighter/node_modules/@types/react/index").ReactNode'.
12:06:32 PM:             Type '{}' is not assignable to type 'ReactNode'.
12:06:32 PM:   4 |
12:06:32 PM:   5 | export default function MyApp({ Component, pageProps }: AppProps) {
12:06:32 PM: > 6 |   return <Component {...pageProps} />;
12:06:32 PM:     |           ^
12:06:32 PM:   7 | }
12:06:32 PM:   8 |
12:06:32 PM: error Command failed with exit code 1. (https://ntl.fyi/exit-code-1)
12:06:32 PM: info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

The current fix is to add the following to your package.json

}
  // ...
  "resolutions": {
    "@types/react": "17.0.40"
  }
}