Nodachisoft Nodachi Sword Icon
  
@あまじ✎ 2021年1月24日に更新

Gatsby で build 時に「A page component must export a React component for it to be valid. Please make sure this file exports a React component:」のエラーがでる

ページ内で書いていること

当サイトは Gatsby でブログや一部 Webアプりを実装していますが、ビルドしたときに エラーメッセージ「A page component must export a React component for it to be valid. Please make sure this file exports a React component:」 が表示されて、ビルドが失敗したので、対応方法を記録しておきます。

確認した環境とバージョン

  • OS: Windows 10 Home, version 2004
  • node-js: v12.18.2
  • react: 16.13.1
  • react-dom : 16.13.1
  • react-headroom : 3.0.0
  • react-helmet : 6.1.0
  • react-redux : 7.2.2
  • redux : 4.0.5
  • typescript": 4.0.5

エラーメッセージ

gatsby build コマンドでビルド実行時に下のようなエラーメッセージが表示されました。 直前に小さな Web アプリを Gatsby ないに組み込んでいた直後に発生しました。

ErrorMessageLog
success createPages - 3.844s
success Checking for changed pages - 0.002s

 ERROR #11328 

A page component must export a React component for it to be valid. Please make sure this file exports a React component:

undefined

not finished createPagesStatefully - 0.243s
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! nodachisoft_www@1.0.1 build: `gatsby build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the nodachisoft_www@1.0.1 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\amaji\scoop\persist\nodejs-lts\cache\_logs\2021-01-24T02_08_05_551Z-debug.log

エラーメッセージ(#11328)の内容からして、 「Gatsby で Page コンポーネント は正しい React Component を export しなくてはならないですよ!このファイルがちゃんと React Component を export しているか確認してね: undefined」です。

というように注意してくれており、肝心のコンポーネントが undefined で分からないですが、どうやらビルド時の createPagesSatefully 処理が正しく行われなかったため、 ビルドが失敗したことがわかります。

それと、上記エラーログの最後に、別途完全なログをファイルへ出力してくれているとのメッセージがあります。 そこを見れば、細かな中断された箇所とか問題のアイルがかわるかな?ということで確認

debug.log
0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli   'C:\\Users\\amaji\\scoop\\apps\\nodejs-lts\\current\\node.exe',
1 verbose cli   'C:\\Users\\amaji\\scoop\\apps\\nodejs-lts\\current\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'run',
1 verbose cli   'build'
1 verbose cli ]
2 info using npm@6.14.5
3 info using node@v12.18.2
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle nodachisoft_www@1.0.1~prebuild: nodachisoft_www@1.0.1
6 info lifecycle nodachisoft_www@1.0.1~build: nodachisoft_www@1.0.1
7 verbose lifecycle nodachisoft_www@1.0.1~build: unsafe-perm in lifecycle true
8 verbose lifecycle nodachisoft_www@1.0.1~build: PATH: xxxx
9 verbose lifecycle nodachisoft_www@1.0.1~build: CWD: C:\Users\amaji\Desktop\dev\htdocs\nodachisoft_www
10 silly lifecycle nodachisoft_www@1.0.1~build: Args: [ '/d /s /c', 'gatsby build' ]
11 silly lifecycle nodachisoft_www@1.0.1~build: Returned: code: 1  signal: null
12 info lifecycle nodachisoft_www@1.0.1~build: Failed to exec build script
13 verbose stack Error: nodachisoft_www@1.0.1 build: `gatsby build`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (C:\Users\amaji\scoop\apps\nodejs-lts\12.18.2\node_modules\npm\node_modules\npm-lifecycle\index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:315:20)
13 verbose stack     at ChildProcess.<anonymous> (C:\Users\amaji\scoop\apps\nodejs-lts\12.18.2\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:315:20)
13 verbose stack     at maybeClose (internal/child_process.js:1021:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5)
14 verbose pkgid nodachisoft_www@1.0.1
15 verbose cwd C:\Users\amaji\Desktop\dev\htdocs\nodachisoft_www\deploy
16 verbose Windows_NT 10.0.19041
17 verbose argv "C:\\Users\\amaji\\scoop\\apps\\nodejs-lts\\current\\node.exe" "C:\\Users\\amaji\\scoop\\apps\\nodejs-lts\\current\\node_modules\\npm\\bin\\npm-cli.js" "run" "build"
18 verbose node v12.18.2
19 verbose npm  v6.14.5
20 error code ELIFECYCLE
21 error errno 1
22 error nodachisoft_www@1.0.1 build: `gatsby build`
22 error Exit status 1
23 error Failed at the nodachisoft_www@1.0.1 build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

うーん、このデバッグログからは、gatsby buildコマンドを実行して、npm スクリプトから起動した子プロセス(なんかの処理)が異常な終了コード(Exit Status 1)を 返されて処理が止まったとしかわからず。

自分のコードのチェック

直前に Gatsby 内で作りこんだ React プログラムを確認してみます。 特に Page Component が対象でエラーになっているようなので、Page Component 関連を確認してみると、まずそうなものを発見。

フォルダ構成
pages
 +-webapp
   +-app1
     +-index.tsx
     +-app.ts

上記のようなフォルダ構成になっており、pages 内部に ts ファイル(TypeScriptファイル)が入ってしまっていました。 この ts の中では、関数を export しています。

おそらく js でも同様のことが起こります。

こいつが原因っぽいので、「pages」配下から別の場所へ移動してあげます。

結果

gatsby build コマンドを実行すると無事に成功となりました。

成功ログ
success createPages - 4.094s
success Checking for changed pages - 0.002s
success createPagesStatefully - 0.420s
success updating schema - 0.082s

良かったですー!

非常に参考になったサイトさまや、参考文献など

ページの更新履歴

更新日 更新内容
更新なし
 
 
送信しました!

コメント、ありがとうございます。

なんかエラーでした

ごめんなさい。エラーでうまく送信できませんでした。ご迷惑をおかけします。しばらくおいてから再度送信を試していただくか、以下から DM などでご連絡頂ければと思います。

Twitter:@NodachiSoft_jp
お名前:
 
連絡先:
 
メッセージ:
 
戻る
内容の確認!

以下の内容でコメントを送信します。よろしければ、「送信」を押してください。修正する場合は「戻る」を押してください

お名前:
 
連絡先:
 
メッセージ:
 
Roboto からの操作ではないという確認のため確認キーを入れてください。
確認キー=95
戻る
 / 
送信確認へ
コメント欄
コメント送信確認へ

関連ありそうな記事(5件)です!

Gatsby でマークダウンの文章を手軽に装飾する(下線とかマーカーを引く、太字にするなど)

#Gatsby✎ 2021-01-30
Gatsby のマークダウンで手軽に装飾する方法を記載。下線を引く、マーカーを引く、太字にする、点線を引くなどを html タグを省略して文章の一部に適用する。
広告領域
追従 広告領域
目次
Gatsby で build 時に「A page component must export a React component for it to be valid. Please make sure this file exports a React component:」のエラーがでる
Gatsby で build 時に「A page component must export a React component for it to be valid. Please make sure this file exports a React component:」のエラーがでる
ページ内で書いていること
ページ内で書いていること
確認した環境とバージョン
確認した環境とバージョン
エラーメッセージ
エラーメッセージ
自分のコードのチェック
自分のコードのチェック
結果
結果
非常に参考になったサイトさまや、参考文献など
非常に参考になったサイトさまや、参考文献など
ページの更新履歴
ページの更新履歴
Nodachisoft © 2020