Bug: Type '{}' is missing the following properties from type

[CesarBenavides777]

Faust App fails to build when locally and when pushing up to vercel. Type '{}' is missing the following properties from type '{ __CLIENT_CACHE_PROP: string; __AUTH_CLIENT_CACHE_PROP: string; }': [CLIENT_CACHE_PROP], [AUTH_CLIENT_CACHE_PROP] <FaustProvider client={client} pageProps={pageProps}>

Build were succeeding yesterday, could be related to wordpress/wpgraphql plugins too.

Applicable Versions

• @faustjs/core version: ^0.15.7
• @faustjs/next version: ^0.15.8
• next version 12.3.0
• @types/jest: "^29.0.2",
• @types/node: "^18.7.18",
• @types/react: "^18.0.20",
• @types/react-dom: "^18.0.6",
• WordPress version: 6.0

Steps To Reproduce

1. Run npm run build locally or push to vercel
2. Error happens when checking validity of types

Link to code example:

import 'assets/fonts/CenturyGothicPro/stylesheet.css'
import 'faust.config'
// import 'normalize.css/normalize.css';
import 'styles/main.scss'

import { client } from 'client'
import ThemeStyles from 'components/ThemeStyles/ThemeStyles'
import { wooClient } from 'providers/wooClient'

import { ApolloProvider } from '@apollo/client'
import { FaustProvider } from '@faustjs/next'

import type { AppProps } from 'next/app';

export default function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ApolloProvider client={wooClient}>
      <ThemeStyles />
      <FaustProvider client={client} pageProps={pageProps}>
        <Component {...pageProps} />
      </FaustProvider>
    </ApolloProvider>
  );
}

The current behavior

Breaks Build

The expected behavior

Build Succeeds

[theodesp]

Hello @CesarBenavides777. Does it work when you add @ts-ignore on top of FaustProvider?

{/* @ts-ignore */}
      <FaustProvider client={client} pageProps={pageProps}>

I run into issues when using React 18 with Next.js 12.3.0. Not sure if its supported.

[CesarBenavides777]

@theodesp I think this is what fixed it so very similar to what you did. From the Headless Wordpress Discord:

From what has been worked on here. It seems like faustjs is expecting the type of pageProps on the FaustProvider to have two properties:

CLIENT_CACHE_PROP: string
AUTH_CLIENT_CACHE_PROP: string

however nextjs no longer requires that.  Adding those to the call "fixed" it kinda:
<FaustProvider client={client} pageProps={{
        ...pageProps, CLIENT_CACHE_PROP: '', AUTH_CLIENT_CACHE_PROP: ''
      }}>

But then some re-rendering issues showed up. So finally the change was reverted back to:
<FaustProvider client={client} pageProps={pageProps}> 

And the _app.tsx file was added to the "exclude" list in the tsconfig.json file:
"src/pages/_app.tsx"

[cobrani]

Do you really want to exclude the whole _app file? As the problem comes with AppProperties, I've introduced my own type: type MyAppProps<P = any> = { pageProps: P; } & Omit<AppProps<P>, "pageProps">;

and use it instead of AppProps.. at least it's only omitting the pageProps and I'm keeping the rest until type issues are fixed

[josephfusco]

We've created a ticket (MERL-529) in our internal backlog to investigate this. We'll write back as soon as we have more details.

[dgallardox]

@theodesp the temporary solution you proposed worked, thanks!

Hello @CesarBenavides777. Does it work when you add @ts-ignore on top of FaustProvider?

{/* @ts-ignore */}
      <FaustProvider client={client} pageProps={pageProps}>

I run into issues when using React 18 with Next.js 12.3.0. Not sure if its supported.

[blakewilson]

Hey yall,

@faustjs/next version 0.15.9 has been released which fixes this.