Getting error: Type '{ children: Element; }' has no properties in common with type 'I-CodePudding

After upgrading my packages today I started getting this error, is it possible to fix without downgrading the packages?

I saw other people having similar errors but with other packages - none of suggested fixes solved my problem.

It was working before but I'd like to keep the packages up to date, if possible.

Thank you!

The error when building:

./src/pages/_app.tsx:46:10
Type error: Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes & CookieConsentProviderProps'.

  44 |
  45 |       <SessionProvider session={session}>
> 46 |         <CookieConsentProvider>
     |          ^
  47 |           <AppContextProvider>
  48 |             {Component.auth ? (
  49 |               <Auth>

> Build error occurred
Error: Call retries were exceeded
    at ChildProcessWorker.initialize (C:\Projects\project1\node_modules\next\dist\compiled\jest-worker\index.js:1:11661)
    at ChildProcessWorker._onExit (C:\Projects\project1\node_modules\next\dist\compiled\jest-worker\index.js:1:12599)
    at ChildProcess.emit (node:events:526:28)
    at Process.ChildProcess._handle.onexit (node:internal/child_process:291:12) {
  type: 'WorkerError'
}
error Command failed with exit code 1.

My _app.tsx:

export interface CustomAppProps extends AppProps {
  Component: NextComponentType & { auth?: boolean };
}

function MyApp({ Component, pageProps: { session, ...pageProps } }: CustomAppProps) {
  return (
    <>
      <SessionProvider session={session}>
        <CookieConsentProvider>
          <AppContextProvider>
            {Component.auth ? (
              <Auth>
                <Component {...pageProps} />
              </Auth>
            ) : (
              <Component {...pageProps} />
            )}
          </AppContextProvider>
        </CookieConsentProvider>
      </SessionProvider>
    </>
  );
}

My package.json:

  "dependencies": {
    "@tailwindcss/forms": "^0.5.2",
    "@use-cookie-consent/react": "^0.3.6",
    "autoprefixer": "^10.4.8",
    "axios": "^0.27.2",
    "bcryptjs": "^2.4.3",
    "dateformat": "^5.0.3",
    "formik": "^2.2.9",
    "next": "^12.2.4",
    "next-auth": "^4.10.3",
    "postcss": "^8.4.16",
    "qs": "^6.11.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.4.0",
    "sass": "^1.54.4",
    "sharp": "^0.30.7",
    "swr": "^1.3.0",
    "tailwindcss": "^3.1.8",
    "yup": "^0.32.11"
  },

CodePudding user response：

Its a problem with the library being incompatible with react 18. In react 18 they removed children as a default prop on the FC type. See https://github.com/use-cookie-consent/use-cookie-consent-react/issues/6

Until its fixed in the offending library to align with React 18, I'd stick a @ts-expect-error in as its just an incorrect third party typing issue -- it will work fine if overridden:

export interface CustomAppProps extends AppProps {
  Component: NextComponentType & { auth?: boolean };
}

function MyApp({ Component, pageProps: { session, ...pageProps } }: CustomAppProps) {
  return (
    <>
      <SessionProvider session={session}>
        {/* @ts-ignore */}
        <CookieConsentProvider>
          <AppContextProvider>
            {Component.auth ? (
              <Auth>
                <Component {...pageProps} />
              </Auth>
            ) : (
              <Component {...pageProps} />
            )}
          </AppContextProvider>
        </CookieConsentProvider>
      </SessionProvider>
    </>
  );
}