出现错误：键入 '{children:Element; }' 与类型“IntrinsicAttributes & CookieConsentProviderProps”没有共同属性

Question

今天升级我的软件包后，我开始收到此错误，是否可以在不降级软件包的情况下修复？

我看到其他人也有类似的错误，但使用其他软件包 - 没有任何建议的修复解决了我的问题。

它之前可以工作，但如果可能的话，我想使软件包保持最新。

谢谢你！

构建时报错：

./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.

我的 _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>
    </>
  );
}

我的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"
  },

Answer 1

这是库与 React 18 不兼容的问题。在 React 18 中，他们删除了children类型的默认 prop FC。请参阅https://github.com/use-cookie-consent/use-cookie-consent-react/issues/6

在它在有问题的库中得到修复以与 React 18 保持一致之前，我会添加一个@ts-ignore，因为它只是一个不正确的第三方输入问题——如果被覆盖它会正常工作：

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>
    </>
  );
}