使用環境

・MacOS BigSur（11.5.2）
・VScode（1.59.1）
・Node.js (16.1.1）
・React（17.0.2）
・Next.js（11.1.0）

はじめに

Vercelのビルド時に出たエラー’Page Without Valid React Component’の解決方法です。

04:50:30.440  	> Build error occurred
04:50:30.442  	Error: Build optimization failed: found pages without a React Component as default export in 
04:50:30.442  	pages/editPage
04:50:30.442  	pages/profile
04:50:30.442  	pages/search
04:50:30.442  	pages/userAuth
04:50:30.443  	See https://nextjs.org/docs/messages/page-without-valid-component for more info.
04:50:30.443  	    at /vercel/path0/node_modules/next/dist/build/index.js:597:19
04:50:30.444  	    at processTicksAndRejections (internal/process/task_queues.js:95:5)
04:50:30.444  	    at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/telemetry/trace/trace.js:60:20)
04:50:30.473  	error Command failed with exit code 1.
04:50:30.474  	info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
04:50:30.493  	Error: Command "yarn run build" exited with 1

結論/解決策

Vercelビルド時のエラーログだけではよく分からなかったので、エラーログに表示されていたNext.jsの公式ドキュメントのURLに飛んだら方法が書いてありました。

pagesの配下のReactコンポーネント（ページとして表示させたいコンポーネント）はexportではなく、export default を使用しなければいけないそうです。

If the file is meant to be a page, double check you have an export default with the React Component instead of an export. If you're already using export default, make sure the returned value is a valid React Component.

公式DOCより

（後々、エラーログみたらちゃんと書いてありました Error: Build optimization failed: found pages without a React Component as default export in）

最後に

default exportだとimportする際のクラス名や関数名が一致していなくても呼び出せることから、予期せぬエラーが生じるのを回避するためにexportを使った方がいいという情報をどこかでみたので慣習的にそうしていました。

しかし今回のようにNext.jsでpagesのコンポーネントとして読み込ませる時など、default exportでなければValid React Componentとしてみなされないケースもあるみたいです。

なぜそうなのか気になって公式ドキュメントのPagesの解説をみましたが、詳しくは書いてありませんでした。これ以上深堀まではしてませんが、そういうものだと思っておきます。

もし詳しい方がいたら情報いただけると幸いです 🙇

参考資料

Next.js 公式ドキュメントPage Without Valid React Component
Hatena Blog 【React/ES6】named exportsとdefault exportsの使い分け