在 Next.js 的 _app.tsx 中出现了”‘Component’ 无法作为 JSX 组件使用” 的错误

2 年 ago

科, 颖

2 minutes

环境

@types/react v17.0.33

背景: only need one option :

在 Next.js 自动创建的 _app.tsx 文件中，存在以下类似的代码。

const App = ({ Component, pageProps }: AppProps) => (
  <Component {...pageProps} />
);

export default App;

从这里开始出现了以下类型错误。

'Component' cannot be used as a JSX component.
  Its element type 'Component<any, any, any> | ReactElement<any, any> | null' is not a valid JSX element.
    Type 'Component<any, any, any>' is not assignable to type 'Element | ElementClass | null'.
      Type 'Component<any, any, any>' is not assignable to type 'ElementClass'.
        The types returned by 'render()' are incompatible between these types.
          Type 'React.ReactNode' is not assignable to type 'import("/Users/username/work/project-name/web/node_modules/@types/react-transition-group/node_modules/@types/react/ts5.0/index").ReactNode'.
            Type '{}' is not assignable to type 'ReactNode'.ts(2786)

听说 TypeScript 提醒说，虽然期望返回一个 ReactNode，但是有可能会返回 {}，这是不可接受的。

导致这个问题的原因是什么？

从错误信息的倒数第二行来看，似乎正在尝试引用 @types/react-transition-group/node_modules/ 下的 @types/react。

Type 'React.ReactNode' is not assignable to type 'import("/Users/username/work/project-name/web/node_modules/@types/react-transition-group/node_modules/@types/react/ts5.0/index").ReactNode'.

查看其内容后，确实看到了一个名为DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_REACT_NODES的变量，确实包含了{}并且是ReactNode的一部分。

    /**
     * For internal usage only.
     * Different release channels declare additional types of ReactNode this particular release channel accepts.
     * App or library types should never augment this interface.
     */
    interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_REACT_NODES {}
    type ReactNode =
        | ReactElement
        | string
        | number
        | ReactFragment
        | ReactPortal
        | boolean
        | null
        | undefined
        | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_REACT_NODES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_REACT_NODES];

请提供更具体的内容或要求，以便我能更好地帮助您进行翻译。

最近似乎是在https://github.com/DefinitelyTyped/DefinitelyTyped/pull/65220中添加的类型。根据查看文件的开头，写着// React 18.2的类型定义。
换句话说，虽然期望在项目的/node_modules/@types/react目录下的ReactNode类型，但却引用了/node_modules/react-transition-group/node_modules/@types/react目录下的ReactNode类型，并且版本不同，因此会导致错误。

顺便提一下，如果看一下 yarn.lock 文件中 @types/react-transition-group 的依赖关系，可以看到如下内容，意思是 @types/react 的版本无所谓，所以可能是在运行 yarn install 时安装了最新版本。

"@types/react-transition-group@npm:^4.4.0":
  version: 4.4.4
  resolution: "@types/react-transition-group@npm:4.4.4"
  dependencies:
    "@types/react": "*"
  checksum: 86e9ff9731798e12bc2afe0304678918769633b531dcf6397f86af81718fb7930ef8648e894eeb3718fc6eab6eb885cfb9b82a44d1d74e10951ee11ebc4643ae
  languageName: node
  linkType: hard

解决办法

由于本次使用 yarn 作为软件包管理工具，要使用其功能 resolutions，需要在 package.json 文件中添加以下内容。

+  "resolutions": {
+    "@types/react": "17.0.33"
+  }

通过这样做，我们可以固定通过依赖库引用的 React 或 @types/react 的版本，从而成功消除开头处的类型错误。
此外，最好在 resolutions 中固定整个应用程序中版本不一致的库，如 Next.js 和 React。

请参考

yarnのhoistingを理解する