Question

获取错误：类型“{children：Element;}”与类型“IntrinsicAttributes＆CookieConsentProviderProps”没有共同的属性

2022-08-11

4640

reactjs typescript next.js

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

我看到其他人也遇到类似的错误，但使用的是其他软件包 - 所有建议的修复方法都无法解决我的问题。

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

谢谢！

构建时的错误：

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