prismic-next icon indicating copy to clipboard operation
prismic-next copied to clipboard

PrismicPreview failing typescript checks.

Open bitscraps opened this issue 1 year ago • 1 comments

When upgrading from @prismicio/next 1.6.0 to 1.7.1 I now get the following typescript error when using PrismicPreview.

pages/_app.tsx:82:20 - error TS2786: 'PrismicPreview' cannot be used as a JSX component.
  Its return type 'Element | Promise<Element>' is not a valid JSX element.
    Type 'Promise<Element>' is missing the following properties from type 'ReactElement<any, any>': type, props, key

                  <PrismicPreview repositoryName={repositoryName} />

This is using the next pages folder versus using nexts new app folder.

The code for _app.tsx looks like the following with superfluous lines removed, this matches what is recommended via the documentation:

import React, { useCallback } from 'react'
import { ApolloProvider } from '@apollo/client'
import { PrismicPreview } from '@prismicio/next'
import { repositoryName } from '../prismicio'

function EolaApp({ Component, pageProps, err }: AppProps) {
  useSetupLocale()

  return (
    <>
      <ApolloProvider client={client}>
           <Component {...pageProps} err={err} />
           <PrismicPreview repositoryName={repositoryName} />
      </ApolloProvider>
    </>
  )
}

### Versions

- `@prismicio/next`: 1.7.1

bitscraps avatar Nov 05 '24 13:11 bitscraps