MDX 3.1.0 introduce breaking change - no longer replace mdx components in React components declared in mdx files

[dimaMachina]

Initial checklist

• I read the support docs
• I read the contributing guide
• I agree to follow the code of conduct
• I searched issues and couldn’t find anything (or linked relevant results below)

Affected packages and versions

@mdx-js/mdx

Link to runnable example

No response

Steps to reproduce

See diff of snapshot

Expected behavior

as before or you should cut a new major release

Screen.Recording.2024-10-20.at.04.23.39.mov

Actual behavior

Screen.Recording.2024-10-20.at.04.22.44.mov

Affected runtime and version

node 20

Affected package manager and version

No response

Affected OS and version

No response

Build and bundle tools

No response

[wooorm]

Hi!

I think you mean this patch c747990.
The old behavior was not intentional. The new behavior is intentional. It is assumed that few people depended on it. It broke other people. So, it is considered a patch.

See facebook/docusaurus#9905 (comment) for some more background info.

[dimaMachina]

@wooorm Even it was not intentional I am pretty sure there are a lot of folks who relied on it, instead of doing breaking change in minor 3.1 release you could do a release of MDX 4 with this change and drop off old Node.js 16 and require Node.js 18 for example

@remcohaszing what do you think?

[wooorm]

I am pretty sure basically nobody uses this. Why do you think many people use this?

What you link to in nextra is not changed. It is not related

What is no longer possible is that you can define a custom component (Test above), write regular JSX in it (span above), and then pass components to change them.

[dimaMachina]

I am pretty sure basically nobody uses this. Why do you think many people use this?

Because it was an easy way to have reusable component with the same styles applied from providerImportSource

What you link to in nextra is not changed. It is not related

What do you mean? Below MyComponent is now unstyled

// my-mdx-page.mdx
export function MyComponent() {
  return (
    <>
      <table>
        <thead>
          <tr>
            <th>Month</th>
            <th>Savings</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>January</td>
            <td>$100</td>
          </tr>
          <tr>
            <td>February</td>
            <td>$80</td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td>Sum</td>
            <td>$180</td>
          </tr>
        </tfoot>
      </table>
      <h1>h1</h1>
      <h2>h2</h2>
      <h3>h3</h3>
      <h4>h4</h4>
      <h5>h5</h5>
      <h6>h6</h6>
    </>
  )
}

<MyComponent />

[wooorm]

I do not know what you mean. What does “unstyled” mean? You can use CSS if you want to style things?
Your issue above is not about style.
The Nextra issue is not about style?
Can you please provide some more info?

[dimaMachina]

What does “unstyled” mean?

mdx components from providerImportSource no longer injected for html elements in MyComponent component

You can use CSS if you want to style things?

Sure, the issue is that you did significant breaking change in minor release

[wooorm]

Your Nextra PR is wrong.

export function Table({ columns, data }) {
  return <table>{/* ... */}</table>
}

<Table columns={3} data={4} />

Has worked and still works. https://mdxjs.com/playground/

---

I understand that you don’t understand English well. You are mixing different things. That change in your Nextra PR is wrong. It has nothing to do with this. Components are still supported.

[dimaMachina]

Your Nextra PR is wrong.

export function Table({ columns, data }) {
  return <table>{/* ... */}</table>
}

<Table columns={3} data={4} />

Has worked and still works. mdxjs.com/playground

You are taking this example out of the context of written section. This section explained how to have a styled <table> and not how to use React Components in MDX.

I understand that you don’t understand English well. You are mixing different things. That change in your Nextra PR is wrong. It has nothing to do with this. Components are still supported.

Thank you for pointing out my English 😂, my PR is not wrong, I removed the no longer worked way of having styled <table>.

[wooorm]

Jeez. I do not understand why Nextra has this weird guide up.

If you want to pass components, pass components: Span, Table, TableCell.

In JSX, Span is a reference to something. span is not a reference to something. span is span.

This was documented: https://mdxjs.com/docs/using-mdx/#components.

This bug was not intentional. This fix is intentional.

[dimaMachina]

There is no mention in Nextra’s docs of passing <Table> component somewhere, he was just locally declared in mdx file

[wooorm]

That’s the problem. If they passed Table, Td, whatever components they wanted, there are no hacks or workarounds needed, no guide needed.