Vue 3 + vite-plugin-ssr + MDX?

[AlanMorel]

Hello MDX folks,

I was wondering if the integration between Vue 3, vite-plugin-ssr, and MDX is possible right now. I have a working example using React but for some reason, swapping out React with Vue while following the MDX guide, and using @mdx-js/vue seems to not be enough. I talked to the author of vite-plugin-ssr and he said to check in with the MDX community about it.

Here's all the relevant code I can provide, perhaps I'm missing something obvious:

App.vue:

<template>
    <MDXProvider :components="components">
        <main class="content">
            <slot />
        </main>
    </MDXProvider>
</template>

<script lang="ts" setup>
    import { MDXProvider } from "@mdx-js/vue";

    const components = {
        h1: "strong",
        h2: "h2"
    };
</script>

package.json:

        "@mdx-js/rollup": "^2.1.2",
        "@mdx-js/vue": "^2.1.2",

vite.config.ts:

import mdx from "@mdx-js/rollup";
import vue from "@vitejs/plugin-vue";
import ssr from "vite-plugin-ssr/plugin";

    plugins: [
        vue(),
        mdx({
            jsx: true
        }),
        ssr()
    ],

With this configuration, I get the following error:

Error: Failed to parse source for import analysis because the content contains invalid JS syntax. You may need to install appropriate plugins to handle the .mdx file format, or if it's an asset, add "**/*.mdx" to `assetsInclude` in your configuration.

Even though I am clearly importing mdx via @mdx-js/rollup.

I am stuck and the error message is not detailed enough for me to know what to try next. I also checked online and could only find examples of it working with React, so wondering if support for Vue just isn't there yet.

Thank you so much in advance!

[ChristianMurphy]

Check out the mdx getting started guide for vue: https://mdxjs.com/docs/getting-started/#vue
in particular the notes from the example:

Vue 3 is supported when using their custom Babel JSX transformer (@vue/babel-plugin-jsx) and configuring @mdx-js/mdx, @mdx-js/rollup, or @mdx-js/loader with jsx: true. You can optionally install and configure @mdx-js/vue, which allows for context based component passing.

the error you shared:

Error: Failed to parse source for import analysis because the content contains invalid JS syntax. You may need to install appropriate plugins to handle the .mdx file format, or if it's an asset, add "**/*.mdx" to `assetsInclude` in your configuration.

sounds like it may be due to the lack of the Babel JSX transformer, or an equivalent, transforming the JSX to plain JS.

[ChristianMurphy]

brillout/vite-plugin-mdx#44 (comment) and #1794 (comment) are two examples I'm aware of, both focused more on React, but the Vue jsx runtime could in thoery be dropped in.

[ChristianMurphy]

https://github.com/codebender828/mdx-2-vite-vue-3 may also be worth a look over

[AlanMorel]

Nice! Copying that second link did the trick for me. It's a shame the setup for Vue is not as clean as React's but I got it fully working nonetheless.

Thanks a lot!

[wooorm]

Optionally install and configure @mdx-js/vue

That sentence means that you don’t need @mdx-js/vue itself.
It does not mean that you don’t need to perform the rest of the steps to configure Vue to work.

It's a shame the setup for Vue is not as clean as React's but I got it fully working nonetheless.

This is due to Vue’s decisions on not supporting the JSX that React, Preact, and other runtimes support.
They have their own JSX-like syntax 🤷‍♂️.

If you don’t care about Vue’s specific extensions to JSX, instead using “normal” JSX, then you should be able to make work by installing the package vue-jsx-runtime, and passing options.jsxImportSource: 'vue-jsx-runtime' to MDX.

[AlanMorel]

I appreciate the technical explanation, was not aware of that quirk on Vue's end, makes a lot of sense now.

I couldn't get it to work using vue-jsx-runtime, but that's fine because I'm cool with my current setup, and it looks like I need babel anyway.

Thanks again!