MDXを試す - Githubissues

MofuMofu2 commented 1 year ago

コンポーネント内にMarkdownを差し込める（逆か？）MDXを使ってみる。 MDXはMarkdown + JSXなので、ブログやドキュメントを記載する際、Markdownの中にJSXコンポーネントを差し込める。

実装後の例を出す際などにとても便利 + コンポーネントライブラリをそのまま使えるので良さそう。

MofuMofu2 commented 1 year ago

インストール

bundler用ツールのインストール
ライブラリのインストール
TypeScript用typesのインストール

npm install --save-dev @mdx-js/loader @mdx-js/mdx @types/mdx

webpackへloader設定を入れる

https://mdxjs.com/packages/loader/

MofuMofu2 commented 1 year ago

Expand Exampleを参考にmdxを置いてみたが、tag nameの名前解決ができていない様子。 https://mdxjs.com/docs/getting-started/#create-react-app-cra

Unhandled Thrown Error!
Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/content.e417dbbe17c284a8b0c5.mdx') is not a valid name.
Error: Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/content.e417dbbe17c284a8b0c5.mdx') is not a valid name.
    at createElement (http://localhost:3000/static/js/bundle.js:19147:38)
    at createInstance (http://localhost:3000/static/js/bundle.js:20136:24)
    at completeWork (http://localhost:3000/static/js/bundle.js:29756:32)
    at completeUnitOfWork (http://localhost:3000/static/js/bundle.js:33518:20)
    at performUnitOfWork (http://localhost:3000/static/js/bundle.js:33494:9)
    at workLoopSync (http://localhost:3000/static/js/bundle.js:33408:9)
    at renderRootSync (http://localhost:3000/static/js/bundle.js:33381:11)
    at recoverFromConcurrentError (http://localhost:3000/static/js/bundle.js:32873:24)
    at performConcurrentWorkOnRoot (http://localhost:3000/static/js/bundle.js:32785:26)
    at workLoop (http://localhost:3000/static/js/bundle.js:43088:38)
💿 Hey developer 👋

You can provide a way better UX than this when your app throws errors by providing your own errorElement props on <Route>

MofuMofu2 commented 1 year ago

https://github.com/MofuMofu2/react-sandbox/issues/6#issuecomment-1370430371

Create React App側のwebpack.config.jsの設定にMDXの設定が含まれておらず、その結果名前解決ができていない様子。 ※CRAはCreate React Appのこと。

CRAの設定を上書きするCRACOを利用すれば回避はできる。 https://mdxjs.com/docs/getting-started/#create-react-app-cra

しかし、CRAが色々セットしているものを上書きするため動作保証がなくなってしまう。 https://craco.js.org/docs/

該当バグの修正PRは上がっているが、一向にマージされない。React Create Appで作成したプロジェクトに対し MDXv2を使うのは現時点ではやめたほうがいいかも？

MofuMofu2 / react-sandbox

MDXを試す #6