Type issue observed in v. 2.23.0

robbienohra commented 3 years ago

Describe the bug

type error when exporting App in a NextJS app since v. 2.23.0

not observing this in earlier versions
it looks like it's related to the App function signature

if I remove the function signature and omit the app props completely then the error is no longer observed

To reproduce

export an App component out of pages/_app.tsx in a NextJS app

Expected behavior

above type issue is not observed and aligns with current API documentation

SDK version v. 2.23.0

Language version, developer tools

React
NextJS

OS/platform

iOS

robbienohra commented 3 years ago

Looks like it's related to a change that was made to the signature of the HOC:

robbienohra commented 3 years ago

nvm I see this was deliberate with the new hoisting functionality!

Was able to get it working with this model:

const Page = <Component {...pageProps} />

const Wrapped = withLDProvider({
    clientSideID: process.env.LD_CLIENT_ID || '',
    user: { key: process.env.LD_KEY },
  })(() => Page)

robbienohra commented 3 years ago

Nvm actually the above approach didn't work 😞

robbienohra commented 3 years ago

Actually it did work 😅

robbienohra commented 3 years ago

Final working example:

import { Provider } from 'react-redux'
import type { AppContext, AppProps } from 'next/app'
import App from 'next/app'
import { AppState, Auth0Provider } from '@auth0/auth0-react'
import Head from 'next/head'
import { withLDProvider } from 'launchdarkly-react-client-sdk'
import { ThemeProvider } from '@material-ui/core/styles'
import store from 'src/redux/store'
import theme from 'src/theme'
import { useRouter } from 'next/router'
import TokenProvider from 'src/components/providers/TokenProvider'

function Ern({
  Component,
  pageProps,
  LD_ID,
  LD_KEY,
}: AppProps & { LD_ID: string; LD_KEY: string }) {

  const router = useRouter()

  const Page = <Component {...pageProps} />

  const Wrapped = withLDProvider({
    clientSideID: LD_ID,
    user: {
      key: LD_KEY,
    },
  })(() => Page)

  return (
    <Provider store={store}>
      <Auth0Provider
        domain={process.env.NEXT_PUBLIC_DOMAIN || ''}
        clientId={process.env.NEXT_PUBLIC_CLIENT_ID || ''}
        redirectUri={
          (typeof window !== 'undefined' &&
            new URL('/navigator/cb', window.location.origin).href) ||
          '/'
        }
        onRedirectCallback={(appState: AppState) =>
          typeof window !== 'undefined' &&
          router.replace(appState.returnTo || '/navigator')
        }
      >
        <Head>
          <title>Site</title>
        </Head>
        <ThemeProvider theme={theme}>
          <TokenProvider>
            <Wrapped />
          </TokenProvider>
        </ThemeProvider>
      </Auth0Provider>
    </Provider>
  )
}

Ern.getInitialProps = async (appContext: AppContext) => {
  const appProps = await App.getInitialProps(appContext)

  return {
    LD_ID: process.env.LD_ID || '',
    LD_KEY: process.env.LD_KEY,
    ...appProps,
  }
}

export default Ern

robbienohra commented 3 years ago

Actually even better:

function Ern({
  Component,
  pageProps,
  LD_ID,
  LD_KEY,
}: AppProps & { LD_ID: string; LD_KEY: string }) {
  const router = useRouter()

  const Wrapper = withLDProvider({
    clientSideID: LD_ID,
    user: {
      key: LD_KEY,
    },
  })(() => (
    <Provider store={store}>
      <Auth0Provider
        domain={process.env.NEXT_PUBLIC_DOMAIN || ''}
        clientId={process.env.NEXT_PUBLIC_CLIENT_ID || ''}
        redirectUri={
          (typeof window !== 'undefined' &&
            new URL('/navigator/cb', window.location.origin).href) ||
          '/'
        }
        onRedirectCallback={(appState: AppState) =>
          typeof window !== 'undefined' &&
          router.replace(appState.returnTo || '/navigator')
        }
      >
        <Head>
          <title>Site</title>
        </Head>
        <ThemeProvider theme={theme}>
          <TokenProvider>
            <Component {...pageProps} />
          </TokenProvider>
        </ThemeProvider>
      </Auth0Provider>
    </Provider>
  ))

  return <Wrapper />
}

Ern.getInitialProps = async (appContext: AppContext) => {
  const appProps = await App.getInitialProps(appContext)

  return {
    LD_ID: process.env.LD_ID || '',
    LD_KEY: process.env.LD_KEY,
    ...appProps,
  }
}

export default Ern

launchdarkly / react-client-sdk

Type issue observed in v. 2.23.0 #73