Updating to @mdx-js/react 3.0.1 causes admonition blocks to stop rendering colored box

[davidzwa]

Updating to @mdx-js/react 3.0.1 causes admonition blocks to stop rendering colored box

[slorber]

This works for me:

Your website declares "@mdx-js/react": "3.0.0", this leads to your repo having twice that package being loaded, not deduplicated, which is the problem.

Use "@mdx-js/react": "^3.0.1", and ensure there is no duplicate version of that package instead:

Then it works

[Josh-Cena]

Because MDX doesn't. 🤷‍♂️ We don't implement Markdown compilation; MDX does. If MDX doesn't tell us something went wrong, there's nothing we can do.

[OzakIOne]

I tried reproducing your issue in a minimal repro and I couldn't reproduce the bug. Am I missing something ?

https://stackblitz.com/edit/github-gesjj3?file=package.json

[davidzwa]

I tried adjusting your stackblitz (completely aligning all versions), but could also not reproduce the problem there.

The difference I see between your and my project is Typescript. You've generated a javascript based docusaurus repro.
I've spun up a TS based project locally and I am able to reproduce the problem (a separate project with default tsconfig/docusaurus config).

[davidzwa]

I've checked locally: the docusaurus build output contains the (seemingly unrendered) component in the html page.

<admonition type="danger"><p>hello</p></admonition>

In the stackblitz the html output looks like:

<div class="theme-admonition theme-admonition-danger admonition_xJq3 alert alert--danger">
   <div class="admonitionHeading_Gvgb">
      <span class="admonitionIcon_Rf37">
         <svg viewBox="0 0 12 16">
            <path fill-rule="evenodd" d="M5.05.31c.81 2.17.41 3.38-.52 4.31C3.55 5.67 1.98 6.45.9 7.98c-1.45 2.05-1.7 6.53 3.53 7.7-2.2-1.16-2.67-4.52-.3-6.61-.61 2.03.53 3.33 1.94 2.86 1.39-.47 2.3.53 2.27 1.67-.02.78-.31 1.44-1.13 1.81 3.42-.59 4.78-3.42 4.78-5.56 0-2.84-2.53-3.22-1.25-5.61-1.52.13-2.03 1.13-1.89 2.75.09 1.08-1.02 1.8-1.86 1.33-.67-.41-.66-1.19-.06-1.78C8.18 5.31 8.68 2.45 5.05.32L5.03.3l.02.01z"></path>
         </svg>
      </span>
      danger
   </div>
   <div class="admonitionContent_BuS1">
      <p>hello</p>
   </div>
</div>

At least this seems to explain what causes the warning in the console.

[davidzwa]

Due to using an automated version management system (Renovate Mend), version pinning is crucial to my repo. Therefore, this solution is not a viable one for me.

I have removed @mdx-js/react from my packages. This gave compilation errors before, but for some reason it does work now.

[Josh-Cena]

@davidzwa You could still use version pinning. All you need to do is to make sure you are using the same version of @mdx-js/react that Docusaurus is using, i.e. 3.0.1 in this case. Or you can ask Renovate to upgrade it for you.

[davidzwa]

The problem is that Renovate did upgrade it before, but I suppose it did not resolve the lock file properly causing two versions to appear. I'm not sure what to do about that and I feel its not a problem to be discussed here.

The truth is: Its annoying that no compilation error is thrown, so a simple docusaurus build action won't cause the PR to be stopped. That's would be an improvement that can still be discussed and therefore this issue is still relevant.

Why does the admonition block not throw a compilation error?