mdxComponent works in dev but not on build

[JonathanLorimer]

I have a bunch of mdx components globally overridden like so:

  mdxComponents(){
    return {
      p: Paragraph,
      a: Anchor,
      h1: H1,
      h2: H2,
      ul: UnorderedList,
      ol: OrderedList,
      li: ListItem,
      b: Bold,
      strong: Bold,
      blockquote: Blockquote,
      em: Italic,
      img: Image,
    }
  }

and that shows up in dev but not in prod. Note I do have scoped stylesheets in those components, which seem to not be applying. Is that expected?

[ElMassimo]

Hi Jonathan!

Can you clarify what you mean with "show up"?

If you provide an example repo, I'd be happy to take a look.

Here's an example from the docs.

[JonathanLorimer]

Hey! Yes, I will put together a repro repo when I am home. Just was in a rush and wanted to get the ball rolling with the issue!

Thanks for the quick response btw.

[JonathanLorimer]

Just for quick reference though, this is what I mean by "not showing up"

// app.ts
import Paragraph from "~/components/MDX/Paragraph.vue"
import Anchor from "~/components/MDX/Anchor.vue"
import H1 from "~/components/MDX/H1.vue"
import H2 from "~/components/MDX/H2.vue"
import UnorderedList from "~/components/MDX/UnorderedList.vue"
import ListItem from "~/components/MDX/ListItem.vue"
import OrderedList from "~/components/MDX/OrderedList.vue"
import Bold from "~/components/MDX/Bold.vue"
import Blockquote from "~/components/MDX/Blockquote.vue"
import Italic from "~/components/MDX/Italic.vue"
import Image from "~/components/MDX/Image.vue"

export default defineApp({
  mdxComponents: {
    p: Paragraph,
    a: Anchor,
    h1: H1,
    h2: H2,
    ul: UnorderedList,
    ol: OrderedList,
    li: ListItem,
    b: Bold,
    strong: Bold,
    blockquote: Blockquote,
    em: Italic,
    img: Image,
  },
  ...
}

// ~/components/MDX/Paragraph.vue
<template>
  <p class="mdx-paragraph">
    <slot></slot>
  </p>
</template>

<style>
  .mdx-paragraph {
    font-size: 1.8rem;
    margin-bottom: 4rem;
  }
</style>

Dev

Prod

[JonathanLorimer]

Here is a minimal repro https://github.com/JonathanLorimer/iles-mdxComponents-repro. Go to the post1 page on dev vs prod.

[ElMassimo]

@JonathanLorimer Thanks for providing details and a reproduction.

Based on what I've found, there's a bug in the MDX optimization for static content, originally added in:

• feat: hoist static MDX content instead of creating vnodes #66

As a result, the client config with overrideElements is processed before detectMdxComponents is called.

I'll need more time to understand if this bug was present in the first implementation, or is something that started happening on a later Vite version, or if it's something that depends on the file structure.

---

This is something that should work out of the box, but as a workaround, you can configure it explicitly for now:

import { defineConfig } from 'iles'

export default defineConfig({
  markdown: {
    overrideElements: ['p'],
  },
})

You'll notice that the component renders as expected, and text is red.

[JonathanLorimer]

@ElMassimo Hey, the fix posted worked. Thanks for the quick responses!

[ElMassimo]

Thanks again for reporting, fixed in iles@0.9.3.