NextJS: 'Box' cannot be used as a JSX component.

[nesterow]

Describe the bug
The problems appear on next build and seem to be related to all theme-ui/Box components:

./src/components/cards/Post.tsx:33:18
Type error: 'Heading' cannot be used as a JSX component.
  Its return type 'ReactNode' is not a valid JSX element.

Screenshots
This is what might cause the error:

theme-ui/packages/components/src/Box.tsx

Line 134 in 6495a0a

return <Component ref={ref} css={style} {...rest} />

'Component' cannot be used as a JSX component.
  Its element type 'ReactElement<any, any> | Component<any, any, any> | null' is not a valid JSX element.
    Type 'Component<any, any, any>' is not assignable to type 'Element | ElementClass | null'.
      Type 'Component<any, any, any>' is not assignable to type 'ElementClass'.
        The types returned by 'render()' are incompatible between these types.
          Type 'React.ReactNode' is not assignable to type 'import("/media/anton/Enterprise1/nesterov.digital/node_modules/@types/react/index").ReactNode'.
            Type 'ReactElement<any, string | JSXElementConstructor<any>>' is not assignable to type 'ReactNode'.
              Property 'children' is missing in type 'ReactElement<any, string | JSXElementConstructor<any>>' but required in type 'ReactPortal'.ts(2786)

Additional context

• OS: Ubuntu 22.10
• NodeJS v18.16.0
• package.json:

  "next": "13.4.4"
  "@types/node": "20.2.5"
  "@types/react": "18.2.8"
  "@types/react-dom": "18.2.4"
  

• tsconfig.json

  "jsxImportSource": "theme-ui",
  

[nesterow]

Currently solved by ignoreBuildErrors:

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
    pageExtensions: ['js', 'jsx', 'ts', 'tsx'],
    typescript: {
        // !! WARN !!
        // Dangerously allow production builds to successfully complete even if
        // your project has type errors.
        // !! WARN !!
        ignoreBuildErrors: true,
    },
}

module.exports = nextConfig

[hasparus]

Hey @nesterow. Thanks for the issue! Just wanted to let you know I reproduced it and I'm working on it.

It might be related to TypeScript 5.1 JSX changes. Not 100% sure yet, but it should be just an update to the types.

https://www.typescriptlang.org/docs/handbook/release-notes/typescript-5-1.html#decoupled-type-checking-between-jsx-elements-and-jsx-tag-types

[hasparus]

Okay, it seems like you need TypeScript 5 to use the newest @types/react.

The error of ReactNode not being JSX.Element comes from the fact that TypeScript 5.1.2 is breaking, and @types/react in DT isn’t semverred, it’s locked to React types.

DefinitelyTyped/DefinitelyTyped#65135

[hasparus]

🚀 Issue was released in v0.16.0 🚀

[nesterow]

Thanks! 👍

…

On Thu, Jun 15, 2023 at 6:11 PM Piotr Monwid-Olechnowicz < ***@***.***> wrote: 🚀 Issue was released in v0.16.0 <https://github.com/system-ui/theme-ui/releases/tag/v0.16.0> 🚀 — Reply to this email directly, view it on GitHub <#2430 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ALPVGLLA2SMY2DCKLXSS4XTXLMQ3FANCNFSM6AAAAAAY2XNYFQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>