components in MdxProvider is not working sometimes

[citrus327]

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

2.1.2

Link to runnable example

No response

Steps to reproduce

I have a document tool that uses MDX as internal.

Users' markdown file are wrapped in a Document component.

like:

import { ShowCode } from "../../built-in/ShowCode";
import { ApiTable } from "../../built-in/ApiTable";
import { MDXProvider } from "@mdx-js/react";

<MDXProvider
  components={{
    ShowCode,
    ApiTable,
    // and so on
  }}
>
  {children}
</MDXProvider>

Sometimes console says

I've checked React Devtools

Seems like the Components are correctly inject.

I debugged into the source code, and i found this

The props.components is undefined

I didn't dig into MDX codebase that hard.

I've checked #1986 #1988 , but does not likely to be related.

Could anyone give me some hints for this kind of issue?

Expected behavior

The component injected in MDXProvider works as expected.

Actual behavior

Injected Component is undefined.

Runtime

Node v14

Package manager

yarn v1

OS

macOS

Build and bundle tools

Vite

[ChristianMurphy]

@phshy0607 could you share a replication of the issue you are seeing?
It's unclear what package you are using and how you are applying the provider.

Here are some starters which could be used to make a replication quickly:

description	codesandbox	stackblitz
MDX Loader with Next.js	codesandbox	stackblitz
MDX Evaluate with Node.js	codesandbox	stackblitz
MDX Evaluate with Create React App	codesandbox	stackblitz

[citrus327]

@ChristianMurphy The document package I working on is https://github.com/BlizzBolts/docit

The provider is used like this: https://github.com/BlizzBolts/docit/blob/master/src/client/components/Document/index.tsx

I will try to make a reproduce if I really could. It's not 100% reproducible.

[citrus327]

@ChristianMurphy
I've checked it again.

It's an issue related to Vite or Esbuild. During vite develop server, vite will do a dependency pre-bundling which pre-bundles @mdx-js/react, I excluded it from pre-bundling by config optimizeDeps.exclude which solves my issue.

I don't know it's related to esbuild which transform deps underneath or vite itself, but my issue is solved. You can close it for now, thanks.