[GH-ISSUE #77] MDX auto-injection doesn't work - plugin runs after vite:import-analysis #22

New issue

Closed

opened 2026-05-06 12:36:35 +02:00 by BreizhHardware · 0 comments

BreizhHardware commented

2026-05-06 12:36:35 +02:00

Owner

Originally created by @rozenmd on GitHub (Feb 25, 2026).
Original GitHub issue: https://github.com/cloudflare/vinext/issues/77

(summary from opencode):

Description

When vinext detects MDX files and auto-injects @mdx-js/rollup, the plugin runs too late in the Vite pipeline (after vite:import-analysis), causing MDX files to fail to compile.

Steps to Reproduce

Create a Next.js project with MDX files in the app directory
Run vinext init
Run npm run dev (vinext)
MDX files fail to import/compile

Expected Behavior

MDX files should be transformed before Vite's import analysis runs.

Actual Behavior

The MDX plugin is injected via the config hook, but plugins returned from config are merged after user plugins. Even with enforce: 'pre', the plugin runs too late.

Root Cause

In packages/vinext/src/index.ts, the MDX plugin is added like this:

config(config) {
  // ...
  if (hasMdx) {
    return {
      plugins: [
        mdx({
          // ...
          enforce: 'pre', // This doesn't help because of when it's merged
        }),
      ],
    }
  }
}

Plugins returned from the config hook are merged after user-defined plugins, so enforce: 'pre' doesn't actually make it run early enough.

Workaround

Users must manually add @mdx-js/rollup to their vite.config.ts with enforce: 'pre':

import mdx from '@mdx-js/rollup'
import { defineConfig } from 'vite'
import vinext from 'vinext'

export default defineConfig({
  plugins: [
    mdx({ enforce: 'pre' }), // Must be added manually, before vinext
    vinext(),
  ],
})

Suggested Fix

Either:

Add the MDX plugin in the plugins array directly (not via config hook)
Use a different hook that runs earlier
Document that MDX users need to manually add the plugin

Additional Issues Found During Migration

Node.js 22 glob API breaking change

The glob function in app-router.ts uses exclude: ["**/@*"], but Node.js 22 requires exclude to be a function:

// Current (breaks on Node 22)
exclude: ["**/@*"]

// Fixed
exclude: (path) => path.includes("/@")

MDX file extensions not included in routing

app-router.ts glob patterns and findFile function don't include .mdx/.md extensions, so MDX pages aren't discovered.

Environment

vinext: 0.0.9
Node.js: 22.x
Vite: 6.x

Originally created by @rozenmd on GitHub (Feb 25, 2026). Original GitHub issue: https://github.com/cloudflare/vinext/issues/77 (summary from opencode): ## Description When vinext detects MDX files and auto-injects `@mdx-js/rollup`, the plugin runs too late in the Vite pipeline (after `vite:import-analysis`), causing MDX files to fail to compile. ## Steps to Reproduce 1. Create a Next.js project with MDX files in the app directory 2. Run `vinext init` 3. Run `npm run dev` (vinext) 4. MDX files fail to import/compile ## Expected Behavior MDX files should be transformed before Vite's import analysis runs. ## Actual Behavior The MDX plugin is injected via the `config` hook, but plugins returned from `config` are merged after user plugins. Even with `enforce: 'pre'`, the plugin runs too late. ## Root Cause In `packages/vinext/src/index.ts`, the MDX plugin is added like this: ```ts config(config) { // ... if (hasMdx) { return { plugins: [ mdx({ // ... enforce: 'pre', // This doesn't help because of when it's merged }), ], } } } ``` Plugins returned from the `config` hook are merged after user-defined plugins, so `enforce: 'pre'` doesn't actually make it run early enough. ## Workaround Users must manually add `@mdx-js/rollup` to their `vite.config.ts` with `enforce: 'pre'`: ```ts import mdx from '@mdx-js/rollup' import { defineConfig } from 'vite' import vinext from 'vinext' export default defineConfig({ plugins: [ mdx({ enforce: 'pre' }), // Must be added manually, before vinext vinext(), ], }) ``` ## Suggested Fix Either: 1. Add the MDX plugin in the `plugins` array directly (not via config hook) 2. Use a different hook that runs earlier 3. Document that MDX users need to manually add the plugin ## Additional Issues Found During Migration ### Node.js 22 glob API breaking change The `glob` function in `app-router.ts` uses `exclude: ["**/@*"]`, but Node.js 22 requires `exclude` to be a function: ```ts // Current (breaks on Node 22) exclude: ["**/@*"] // Fixed exclude: (path) => path.includes("/@") ``` ### MDX file extensions not included in routing `app-router.ts` glob patterns and `findFile` function don't include `.mdx`/`.md` extensions, so MDX pages aren't discovered. ## Environment - vinext: 0.0.9 - Node.js: 22.x - Vite: 6.x