How do I generate pages from mdx with Vite, React, and vite-plugin-pages?

[peytondmurray]

I'm trying to create a blog with Vite, React, and vite-plugin-pages, which generates routes for a bunch of my pages. I'm trying to generate a page (/blog) which lists routes to blog posts. How can I do this programmatically?

Here's my vite.config.js:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import Pages from 'vite-plugin-pages'
import mdx from '@mdx-js/rollup'

export default defineConfig({
    plugins: [
        react(),
        mdx(),
        Pages({
            dirs: [
                { dir: 'src/pages/MainPage', baseRoute: '' },
                { dir: 'src/pages/About', baseRoute: 'about' },
                { dir: 'src/pages/Blog', baseRoute: 'blog' },
            ],
        }),
    ],
    resolve: {
        alias: {
            "react/jsx-runtime": "react/jsx-runtime.js"
        }
    }
})

Here's the contents of src/pages/Blog/:

├── content
│   ├── 2018-02-11-blog-post-abc
│   │   └── post.mdx
│   └── 2019-12-08-blog-post-def
│       └── post.mdx
└── index.tsx

Ideally the build toolchain would create the following routes:

• /blog, containing a list of blog posts
  • /blog/2018-02-11-blog-post-abc
  • /blog/2019-12-08-blog-post-def

So far I can't tell if the @mdx-js/rollup plugin has produced any output, and I don't think any new routes have been generated. Does anyone have any advice here?

[wooorm]

You might have more luck asking the pages plugin people :)

[peytondmurray]

Thanks, I'll be sure to do that. What about the mdx plugin, though? Shouldn't it automatically compile the post.mdx files? I must be missing something here...

[wooorm]

The MDX plugin works, we have a bunch of tests and folks using it in the wild that show that it does.

It does not “create pages” though. You are using another plugins for that?

What’s unique about your case is Vite and that plugin. That’s why you’ll likely get answers there.