Recoil Nexus - 元素类型无效：需要字符串（用于内置组件）或类/函数（用于复合组件）但得到 object

Question

我开始收到错误：

error - Error: Element type is invalid: expected a string (for built-in components) or
               a class/function (for composite components) but got: object.
               at ReactDOMServerRenderer.render ...

在我的 NextJS 项目中添加 TypeScript 支持时。

我搜索了类似的问题，但答案主要是关于错误的导入/导出。 但就我而言，似乎并非如此。

在此错误之前我还会收到警告：

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or
a class/function (for composite components) but got: object.

Check your code at _app.js:18.
    at App (webpack-internal:///./pages/_app.js:19:16)

这是我的_app.js ：

import "../styles/global.scss";
import "video.js/dist/video-js.css";
import { RecoilRoot } from "recoil";
import RecoilNexus from "recoil-nexus";
import { CookiesProvider } from "react-cookie";
import Head from "next/head";

export default function App({ Component, pageProps }) {

  return (
    <>
      <Head>
        <meta name="theme-color" content="#fff" />
        <meta name="viewport" content="initial-scale=1, width=device-width" />
      </Head>
      <CookiesProvider>
        <RecoilRoot>
          <RecoilNexus />
          <Component {...pageProps} />
        </RecoilRoot>
      </CookiesProvider>
    </>
  );
}

因此，由于<RecoilNexus />部分而产生了错误。

我尝试评论它并且错误消失了。 但是，我仍然需要在我的项目中使用它。

Answer 1

只需将我的_app.js文件扩展名更改为_app.tsx解决问题。 我仍然不确定为什么会发生这种情况，以及这个问题是否仅在使用recoil-nexus并将 TS 添加到 NextJS 项目时才存在，或者这是在将 TS 添加到现有项目时必须做的事情。 我很高兴知道更多关于这个原因的信息

Recoil Nexus - 元素类型无效：需要字符串（用于内置组件）或类/函数（用于复合组件）但得到 object

问题描述

1 个解决方案

解决方案1
0 2022-08-15 13:50:48

Recoil Nexus - 元素类型无效：需要字符串（用于内置组件）或类/函数（用于复合组件）但得到 object

问题描述

1 个解决方案

解决方案1 0 2022-08-15 13:50:48

解决方案1
0 2022-08-15 13:50:48