Markdownファイルを文字列として読み込んでReactで表示する方法

Markdownファイルを文字列として読み込んでReactで表示するのをVite環境で行う方法です。

Markdownファイルを文字列として読み込む

fsモジュールを使う方法とかもあるみたいだけど、viteを使っている場合はfromのフィル名末尾に?rawを付与するだけでよいみたい。

import shaderString from './shader.glsl?raw'

アセットは末尾に ?raw を付与することで文字列としてインポートすることができます。
https://ja.vite.dev/guide/assets#importing-asset-as-string

読み込んだ文字列をReactとして表示する

marked-reactを使いました。

honoを使っているので少しhono前提のコードが入っていますが、次のコードでLayoutの内容と一緒に表示ができました。

import about from './contents/about.md?raw'
import Markdown from 'marked-react';

app.get('/about', (c) => {
  return c.html(renderToString(<Layout><Markdown>{about}</Markdown></Layout>))
})

感想

Copilotに実現方法を聞いたら、fsを使う方法を提案された。
こんなに色々書きたくなかった。

import fs from 'fs';
import path from 'path';

// ファイルパスを解決
const aboutFilePath = path.resolve(__dirname, './contents/about.md');

// ファイル内容を読み込み
const aboutContent = fs.readFileSync(aboutFilePath, 'utf-8');

表示されるエラーをColilotに聞いてみたら

ファイルのインポートに問題があるようです。vite が about.md ファイルを正しく処理できていない可能性があります。

と教えてくれてvite-plugin-stringのページを参照したら"vite already supports suffix ?raw, import as string."と書かれていて今回の解決策に至った。

CopilotはVSCodeのワークスペース全体を見て答えてくれてるはずなんだけど、Viteを使っていることもReactを使っていることも考慮してくれなかった。