[Bug]: (v7) @mdx-js/rollup: Unexpected FunctionDeclaration in code: only import/exports are supported. Error for a custom vite server.

[zdunecki]

What version of React Router are you using?

v7

Steps to Reproduce

1. Install react-router (7.0.0-pre.1)
2. Install @mdx-js/rollup (tested with ^3.1.0 and ^3.0.1)
3. Create a custom vite server and add plugins for mdx + react-router
4. Run custom vite server

Demo: https://stackblitz.com/edit/vitejs-vite-xmllxz?file=package.json

Expected Behavior

As a user, I expect the same behaviour for a custom vite server as a react-router one when using a mdx plugin.

Actual Behavior

When I run a react-router via a custom vite server with @mdx-js/rollup plugin I got error:

[plugin:@mdx-js/rollup] Unexpected `FunctionDeclaration` in code: only import/exports are supported
/home/projects/vitejs-vite-xmllxz/Post.mdx:2:1
1  |  import {jsxDEV as _jsxDEV} from "react/jsx-dev-runtime";
2  |  function _createMdxContent(props) {
   |   ^
3  |    const _components = {
4  |      h1: "h1",

Demo: https://stackblitz.com/edit/vitejs-vite-xmllxz?file=package.json

[zdunecki]

I fixed that by removing mdx plugin from vite.config.ts. Since it's reasonable it would be great to have better developer experience here IMO.

Additionally react-router/remix requires configFile inside vite createServer and this leds to create vite config which is not really needed (below stackblitz demo). Because of that fact I did mistake to pass mdx plugin twice.

Here's a demo: https://stackblitz.com/edit/vitejs-vite-mhy6h5?file=vite.config.ts

[DovydasNavickas]

I've updated your demo and it worked.
I've removed all of the options from server.ts and then it takes them from vite.config.ts by default.

vite.config

import { reactRouter } from '@react-router/dev/vite';
import { defineConfig } from 'vite';
import mdx from '@mdx-js/rollup';

export default defineConfig({
  plugins: [mdx(), reactRouter()],
  optimizeDeps: {
    include: ['react/jsx-runtime'],
  },
});

server.ts

import { createServer } from 'vite';

async function startServer() {
  const server = await createServer({});

  await server.listen(5173);
  server.printUrls();
  server.bindCLIShortcuts({ print: true });
}

startServer();

StackBlitz doesn't let me save some why, so no link for the demo.

[pcattori]

Since it's reasonable it would be great to have better developer experience here IMO.

Agreed! I'm working on it 👍