Import markdown files dynamically with Vite

Question

I'm looking for a solution that lets me render markdown dynamically, based on the query string. At the moment I render markdown like this, in React + Vite:

import some other stuff...
import { useParams } from 'react-router-dom';
import { ReactComponent } from '../content/blog1.md';
const BlogPost = () => {
  const params = useParams();
  return (
    <Base>
      <PageTitle title={`title of blog ${params.blogId}`} />
      <ReactComponent />
    </Base>
  );
};
export default BlogPost;

What I would like is to pass the blogId to the import path like:

import { ReactComponent } from `../content/blog${params.blogId}.md`

Such that the correct file is imported on each /blog/* route. I tried this by lazy loading the markdown like:

const path = `../content/blog${params.blogId}.md`;
const Markdown = React.lazy(() => import(path));

But this raises errors and when I log Markdown I see

{$$typeof: Symbol(react.lazy), _payload: {…}, _init: ƒ}
$$typeof: Symbol(react.lazy)
_init: ƒ lazyInitializer(payload)
_payload: {_status: -1, _result: ƒ}

Which appears to be empty. What would be a solution to accomplish this?

Answer 1

I had also issue when importing assets. In my case .md import failed.

import Article from './assets/article.md';

Failed to parse source for import analysis because the content contains invalid JS syntax. You may need to install appropriate plugins to handle the .md file format, or if it's an asset, add "**/*.md" to assetsInclude in your configuration

So I solved it adding assetsInclude: ['**/*.md'] setting to vite.config.js (for my .md files)

export default defineConfig({
  ...
  plugins: [react()],
  assetsInclude: ['**/*.md']
  ...
})

Eventually this started to work:

import("./assets/article.md").then(res => {
    fetch(res.default)
    .then(response => response.text())
    .then(text => console.log(text))
})

Docs are here:https://vitejs.dev/guide/assets.html Hope it helps.

Cheers.