我开始得到错误：
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 />部分而产生的。
我试着评论了一下，错误就消失了。然而，我仍然需要在我的项目中使用它。
只需将_app.js文件的扩展名更改为_app.tsx就解决了问题。我仍然不确定为什么会发生这种情况，也不确定这个问题是否只在使用recoil-nexus并将TS添加到NextJS项目时存在，或者在将TS添加至现有项目时必须这样做。我很高兴知道更多关于这个的原因