Issue in projects with TypeScript version < 5.1.3: "'NDKProvider' cannot be used as a JSX component"

[kouloumos]

The problematic behaviour

When you try to setup ndk-react in a (react) project with typescript version < 5.1.3 you get the following typescript error:

TS2786: 'NDKProvider' cannot be used as a JSX component.
  Its return type 'Element | undefined' is not a valid JSX element.
    Type 'undefined' is not assignable to type 'Element | null'.
     9 | function App() {
    10 |   return (
  > 11 |     <NDKProvider>
       |      ^^^^^^^^^^^
    12 |       <div className="App">
    13 |         <header className="App-header">
    14 |           <img src={logo} className="App-logo" alt="logo" />

The above example is from a new react app created with npx create-react-app my-app --template typescript which at this time initializes the app with typescript 4.9.5.

Steps to reproduce

1. Create a new react app with npx create-react-app my-app --template typescript
2. Install the package with npm install @nostr-dev-kit/ndk-react
3. Wrap the app in src/App.tsx with NDKProvider
4. Run the app with npm start

The Issue

I was initially confused with this error because it was flagged in my IDE for both the starter demo app and my local react app but only failed at the latter. This was because my VS Code was configured with 5.0.4 but the starter app uses 5.1.3. The error disappeared after I synced everything to the latest version of typescript.

It might not make sense to try and fix this in order to be compatible with previous typescripts versions but I am reporting it in case someone else bumps into it. I am not sure how long will take for create-react-app to use this latest version of typescript, but I assume that others will stumbled upon the same issue if they are creating apps with the same flow or not using the latest typescript version.

Update: Even if you manually change the typescript version to ^5.X.X for a project created with create-react-app you still get an error with each subsequent npm install because the latest version of react-scripts (5.0.1) has [email protected] as a conflicting peer dependency. The best solution for me was to switch to vite.