无法构建 React/Next 项目 - 发现页面没有 React 组件作为默认导出（上下文 api 文件）

Question

我正在尝试构建我的 Next.js 项目，但它一直在终端中给我这个错误：

Error: Build optimization failed: found page without a React Component as default export in 
pages/components/context/Context

这是 React context API 文件，那里不应该有任何默认导出。这是错误还是什么？

Answer 1

您应该将

components

移到

pages

文件夹之外。

pages/

只能用于页面组件，因为 Next.js 路由基于其结构。

Next.js 有一个基于页面概念的基于文件系统的路由器。

将文件添加到页面目录后，它会自动用作路由。

默认情况下，Next.js 假定

pages

文件夹下的任何内容都是页面组件，并将尝试将每个文件构建为页面。

---

即使上述是默认行为，您也可以将 Next.js 应用程序配置为 在

pages

目录中包含非页面文件。

为此，您可以修改

pageExtensions

文件中的

next.config.js

条目，如下所示。然后重命名页面组件，使其文件扩展名包含

.page

（

_document.page.js

、

_app.page.js

、

index.page.js

等）。

module.exports = {
    pageExtensions: ['page.tsx', 'page.ts', 'page.jsx', 'page.js']
}

通过此配置，Next.js 将忽略任何不包含

.page

的文件，以构建页面/API 路由和路由。

Answer 2

就我而言，文件夹中有一个空文件

index.js

。使用 Nextjs 默认路由器

Answer 3

我也有同样的错误。

如果你注释掉所有其他代码但留下这个 NextJS 不会生你的气：

export default function Home1() {
  return <>{/* nothing */}</>;
}

我喜欢在本地和 github 上保留旧的索引文件和组件，所以这是一个很好的技巧。我只是复制所有现有代码，将其添加到一个新文件中，然后向其中添加 1，例如：

index1.js

您还可以发表评论，让您和其他开发人员了解您这样做的原因，例如：

//good for history of index implementation and associated syntax logic 

Answer 4

上下文组件中似乎没有声明默认导出关键字。 尝试如下：

const  Context = ()=>{
  ...
}
export default Context

Answer 5

我通过将 myfile.tsx 移动到“components”文件夹并通过 import {myfunction1, myfunction2,etc} from '@/components/myfile' 将其导入到我需要的地方解决了这个问题；

一些详细信息可以在这里找到。