How to use @mdx-js/rollup with Vite?

[ghost]

My file vite.config.ts looks like below:

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

export default defineConfig({
    plugins: [
        react(),
        mdx(),
        Unocss()
    ],
})

When I run npx vite --port=4000 to start server, the terminal suddenly shows the error [ERR_REQUIRE_ESM].

Does anyone know how to fix this? Thanks in advance.

[ChristianMurphy]

This appears to be the same as #1973 ?

---

The issue is that, mdx is native ESM and your project is not native ESM.

From vite's documentation.

Note Vite supports using ES modules syntax in the config file even if the project is not using native Node ESM via type: "module". In this case, the config file is auto pre-processed before load.

https://vitejs.dev/config/#config-file-resolving

Here pre-processing to CJS will cause an error.
Add "type": "module" to your package.json to ensure it is native ESM.

[Lrunlin]

If I use vite + react to develop a project, in package Setting type: module in JSON will cause vscode to generate an error prompt, although it will not affect anything in development