[component] cannot be used as a JSX component

[vrugtehagel]

Describe the bug
In version 6.0.0 of @stripe/ui-extension-sdk, components do not have the correct type definitions. Running the TypeScript compiler throws an error for every component, e.g.

error TS2786: 'Box' cannot be used as a JSX component.
  Its element type 'ReactElement<any, any> | Component<ReactPropsFromRemoteComponentType<RemoteComponentType<"Box", StylableProps, true>>, any, any> | null' is not a valid JSX element.

         <Box />
          ~~~

To Reproduce
Create a new app through stripe apps create helloworld. When set up, run the TypeScript compiler.

Expected behavior
No errors are thrown.

Desktop (please complete the following information):
MacOS Monterey

[ericfrank-stripe]

Hi @vrugtehagel, I'm not able to reproduce this issue. Here's my full test case:

import {Box} from '@stripe/ui-extension-sdk/ui';
const App = () => {
  return (
    <Box />
  );
};

Running yarn tsc is successful. Would you mind posting your app code?

[ericfrank-stripe]

@vrugtehagel I just figured out how to reproduce this by force installing all new packages. Looking into the issue now.

[ericfrank-stripe]

It looks like the issue is due to the wrong React types package (v18) being pulled in by one of our dependencies. We're looking into a permanent fix, but for now you can add a resolutions section for yarn or an overrides section for npm to your package.json to force the correct version:

yarn

{
  "resolutions": {
    "@types/react": "^17.0.2"
  }
}

npm

{
  "overrides": {
    "@types/react": "^17.0.2"
  }
}

Delete yarn.lock and node_modules and do a fresh install. I'll update this issue when we have a permanent fix.

[ericfrank-stripe]

The root cause: facebook/react#24304

[ericfrank-stripe]

Created a notice about this issue here: #402