当サイトは Gatsby でブログや一部 Webアプりを実装していますが、ビルドしたときに エラーメッセージ「A page component must export a React component for it to be valid. Please make sure this file exports a React component:」 が表示されて、ビルドが失敗したので、対応方法を記録しておきます。
gatsby build
コマンドでビルド実行時に下のようなエラーメッセージが表示されました。
直前に小さな Web アプリを Gatsby ないに組み込んでいた直後に発生しました。
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 処理が正しく行われなかったため、 ビルドが失敗したことがわかります。
それと、上記エラーログの最後に、別途完全なログをファイルへ出力してくれているとのメッセージがあります。 そこを見れば、細かな中断された箇所とか問題のアイルがかわるかな?ということで確認
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お名前:以下の内容でコメントを送信します。よろしければ、「送信」を押してください。修正する場合は「戻る」を押してください
お名前: