Gatsby でマークダウンの文章を手軽に装飾する（下線とかマーカーを引く、太字にするなど）
#Gatsby✎ 2021-01-30Gatsby のマークダウンで手軽に装飾する方法を記載。下線を引く、マーカーを引く、太字にする、点線を引くなどを html タグを省略して文章の一部に適用する。
@あまじ✎ 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 で 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:」のエラーがでる
ページ内で書いていること
ページ内で書いていること
確認した環境とバージョン
確認した環境とバージョン
エラーメッセージ
エラーメッセージ
自分のコードのチェック
自分のコードのチェック
結果
結果
非常に参考になったサイトさまや、参考文献など
非常に参考になったサイトさまや、参考文献など
ページの更新履歴
ページの更新履歴