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