Gatsby v5の導入テスト（v5.13.0） #1042
Gatsby v5の導入テスト（v5.13.0） #1042
Conversation
✅ Deploy Preview for smarthr-design-system ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
src/gatsby-node/index.ts
Outdated
There was a problem hiding this comment.
MDXを扱うgatsby-nodeを主に変更しています。内容はほぼ公式のドキュメントを参考にしています：https://www.gatsbyjs.com/plugins/gatsby-plugin-mdx/#migrating-from-v3-to-v4
There was a problem hiding this comment.
depthとheadingsがデフォルトでは取得できなくなったため、プラグインを追加しました。こちらも公式のドキュメントを参考にしています：https://www.gatsbyjs.com/plugins/gatsby-plugin-mdx/#headings
|
|
||
| const components: MDXComponents = { | ||
| pre: (props: any) => <div {...props} />, | ||
| // MDX v2ではinfo string (metastring)が渡ってこないため、現状codeBlockは受け取れてない | ||
| code: ({ children, codeBlock, ...props }) => |
There was a problem hiding this comment.
現状、この部分のcodeBlockの判定はできていません。そのため、全てcodeタグでのマークアップになってしまっています。
| {children} | ||
| </FragmentTitle> | ||
| ), | ||
| table: ({ children }) => <TableWrapper mdTable={true}>{children}</TableWrapper>, |
There was a problem hiding this comment.
table記法はサポートしなくなったため、（gfmのプラグインを入れても）ここにtableとして入ってくることもないので、削除しています。
yuw27b
force-pushed
the
feature/gatsby-v5
branch
from
7c43f02
to
4d6a955
Compare
There was a problem hiding this comment.
コードフェンスではなく、直接CodeBlockコンポーネントを使うようにした例です。
https://deploy-preview-1042--smarthr-design-system.netlify.app/products/components/heading/#h2-1
課題・背景
背景
現在使っているGatsbyはv4系ですが、一応はもうすぐサポートが切れる予定になっています（ドキュメント）。
※次期バージョンのv6がリリースされる気配がないので、サポート状況も変わるのかもしれませんが。
これまでの経緯
v5へのアップデートは何度か試みていましたが、MDXプラグイン＋SDSのコンテンツ量では、メモリ不足によりビルドできない状況でした。
現在のv5.13であれば、ビルドはNode.jsのデフォルト（4GB）で可能になっていたので、ビルドができるところまでマイグレーションを試みたのがこのPRです。
試みた結果
やったこと
Gatsbyをv5に、MDXをv2にして、必要なマイグレーションを行いました。大きなものは、gatsby-nodeのアップデートとMDXv2の文法への適応です。具体的には、コードにコメントします。
やらなかったこと
以下が動かない状態です。
MDX中のテーブルの変換
MDX v2では、テーブル記法が使えなくなり、GitHub Flavored Markdownのプラグインを入れる必要があります。入れてはありますが、テンプレートでの変換処理（
tableタグをTableWrapperコンポーネントでラップする）は動きません。なので、テーブル記法ではなく、HTMLのtableタグで書くほうが良いかもしれません（その場合プラグインも不要になります）。コードフェンス記法のinfo string(meta string)
↑のように書いているコードの、
editable codeBlockがテンプレート側で受け取れなくなっています。MDXのドキュメントでは、プラグインが紹介されていますが、Gatsbyに導入してもうまくビルドができませんでした。https://mdxjs.com/guides/syntax-highlighting/#syntax-highlighting-with-the-meta-field
→紹介されているremark-mdx-code-metaはdeprecatedで、rehype-mdx-code-propsへのリンクがあるが、どちらもビルドエラーになり、簡単に導入できるものではなさそうでした。
こちらも、コードフェンスではなく、
<CodeBlock>コンポーネントを直接importしてpropsで指定するなどの変更が必要かもしれません。その他開発時のことなど
GATSBY_CPU_COUNT=2などの数値をセットすると、ビルド（devサーバー）処理の並列化数を変えられるようです。数値を変えると、多少はメモリ消費にも影響するかもしれません。SIGSEGVのエラーになることが多く、その度にyarn cleanが必要になります。これはGatsby側で対応しているところのようです。ERROR #85923 GRAPHQL.VALIDATIONが大量に（ほぼ全てのクエリに対して）出る場合、GraphQLクエリそのものには問題がなく、MDXプラグインがうまく動いていないなどの原因であることが多い印象です。gatsby devの際に型定義ファイルを生成します。gatsby buildではできないので、devがうまく動かない場合は、v4系で生成された/src/gatsby-types.d.tsをコピーしてきても問題ありません（.gitignoreされています）。