Got type error when upgrading react-client-sdk from 2.22.3 to 2.23.{1,2}

[chenrui333]

Is this a support request?

Yes.

Describe the bug Have run into some type mismatch when upgrading the react-client-sdk

Error: src/pages/_app.tsx(92,4): error TS2345: Argument of type '({ Component, pageProps }: AppProps<{}>) => Element' is not assignable to parameter of type 'ComponentType<{}>'.
  Type '({ Component, pageProps }: AppProps<{}>) => Element' is not assignable to type 'FunctionComponent<{}>'.
    Types of parameters '__0' and 'props' are incompatible.
      Type '{ children?: ReactNode; }' is not assignable to type 'AppProps<{}>'.
        Property 'pageProps' is missing in type '{ children?: ReactNode; }' but required in type 'AppInitialProps'.

To reproduce

_app.ts:

import "../styles/globals.css";
import { withLDProvider } from "launchdarkly-react-client-sdk";

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

export default withLDProvider({
  clientSideID: process.env.LAUNCHDARKLY_SDK_CLIENT,
  user: identifyLDUser(),
  options: {
    streaming: false
  },
  reactOptions: {
    useCamelCaseFlagKeys: false
  }
})(MyApp);

Expected behavior Pass the type checking.

Logs See above with the console printout.

SDK version 2.23.1 and 2.23.2. It works with 2.22.3

Language version, developer tools For instance, Go 1.11 or Ruby 2.5.3. If you are using a language that requires a separate compiler, such as C, please include the name and version of the compiler too.

[ctawiah]

Hi @chenrui333, the reason typescript is complaining is because withLDProvider now provides better support for component prop type using typescript generics, when a type isnt provided, it defaults to React's default component type of {} which is incompatible with your prop type AppProps.

To resolve your issue you must pass your component's type to withLDProvider like so:

import "../styles/globals.css";
import { withLDProvider } from "launchdarkly-react-client-sdk";

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

export default withLDProvider<AppProps>({
  clientSideID: process.env.LAUNCHDARKLY_SDK_CLIENT,
  user: identifyLDUser(),
  options: {
    streaming: false
  },
  reactOptions: {
    useCamelCaseFlagKeys: false
  }
})(MyApp);

Try the above and let me know if it works for you.

[chenrui333]

Thanks @ctawiah, let me give a shot now. Cheers!

[chenrui333]

works for me, closing the issue.