Vite環境(React)でjsxにmdxをインポートする

ViteでReactコンポーネント内にmdxをインポートする設定
(README.mdxを作ってApp.tsxに同じ内容を入れたい場合等に便利)

モジュールをインストール

npm i @mdx-js/rollup remark-gfm github-markdown-css

README.mdxを作成

echo '#Hello world' > README.mdx

vite.configにプラグインを設定

vite.config.ts

...
import mdx from '@mdx-js/rollup';
import remarkGfm from 'remark-gfm';

const options = {
  remarkPlugins: [remarkGfm],
  rehypePlugins: [],
}

export default defineConfig({
  ...
  plugins: [ react(), {enforce: 'pre', ...mdx(options)} ],
})

mdx用のtype.dを作成

mdx.d.ts

declare module '*.mdx' {
  let MDXComponent: (props) => JSX.Element;
  export default MDXComponent;
}

main.tsxでマークダウンBodyのスタイル(github-markdown-css)を適用

main.tsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'

import 'github-markdown-css';
import './index.css'

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

App.tsxでREADME.mdxを表示

App.tsx

import README from '../README.mdx'

function App() {
  return (  
    <div className="markdown-body">
      <README />
    </div>
  )
}

export default App