TypeError: mdx is not a function

[xsf0105]

vite.config.json is:

import { defineConfig } from 'vite';
import mdx from 'vite-plugin-mdx'

const { resolve } = path;

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

but I got error:

TypeError: mdx is not a function

May I ask Why and how to solve it?

[silvenon]

Probably because Vite is all about ESM now, and vite-plugin-mdx is published as CJS. Try logging mdx and find a way to get to the actual plugin.

[nandumoura]

vite.config.json is:

import { defineConfig } from 'vite';
import mdx from 'vite-plugin-mdx'

const { resolve } = path;

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

but I got error:

TypeError: mdx is not a function

May I ask Why and how to solve it?

I have the same issue Did you manage to solve this problem?

[xsf0105]

@nandumoura not yet

[silvenon]

What does console.log(mdx) say?

[nandumoura]

this object { default: [Function: viteMdx] { withImports: [Function (anonymous)] } }

[silvenon]

So what about this?

import { defineConfig } from 'vite'
import mdx from 'vite-plugin-mdx'

const mdxPlugin = mdx.default

export default defineConfig({
  plugins: [
    mdxPlugin()
  ],
})

[xsf0105]

@silvenon Still error, You can try it locally.

failed to load config from /Users/xxx/Desktop/quarkc-project111111/vite.config.ts
error when starting dev server:
TypeError: mdxPlugin is not a function
    at Object.<anonymous> (/Users/xxx/Desktop/quarkc-project111111/vite.config.ts:40:5)
    at Module._compile (node:internal/modules/cjs/loader:1105:14)
    at Object._require.extensions.<computed> [as .js] (file:///Users/xxx/Desktop/quarkc-project111111/node_modules/vite/dist/node/chunks/dep-a8e37fae.js:66174:24)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at loadConfigFromBundledFile (file:///Users/xxx/Desktop/quarkc-project111111/node_modules/vite/dist/node/chunks/dep-a8e37fae.js:66182:21)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async loadConfigFromFile (file:///Users/xxx/Desktop/quarkc-project111111/node_modules/vite/dist/node/chunks/dep-a8e37fae.js:66007:28)

[silvenon]

I'm getting a different error 😕 Which is expected in Vite v3+.

Error [ERR_REQUIRE_ESM]: require() of ES Module

Which versions of MDX and Vite are you using?

[xsf0105]

It's another error, you can remove type: module from your package.json anyway.

Then, you can get my error: TypeError: mdxPlugin is not a function ......

[silvenon]

If you remove "type": "module" then using mdx directly will work, mdx.default is undefined in that case, that's why you're getting the error. I managed to start the Vite app that way.

But if you removed "type": "module" already, and using vite-plugin-mdx directly didn't work either then there's something else going on in your project.

[silvenon]

If you're using React, you'll have to install v1 of @mdx-js/mdx and @mdx-js/react, which means that you'll have to downgrade to React v17.

[xsf0105]

I'm not React or Vue, I am using: https://github.com/hellof2e/quark-core

Template generate is:

npm create quarkc@latest
// > choose components

[cyco130]

Can you try @cyco130/vite-plugin-mdx? @brillout and I have been planning to release it as the next major (v4) of this plugin but didn't come around to it yet. It uses MDX v2 and it's more up to date.

[xsf0105]

👌, I will have a try it. Thx Bro @cyco130.

[silvenon]

Good luck!

I'll close this until there is a repro I can play with. Try to isolate what exactly doesn't work in your setup, without Quarkc.

Btw, we published v3.6.0 with stricter peerDependencies, so that it's immediately obvious which versions of Vite and MDX this plugin officially supports.