You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Thank you for your work. This library is especially helpful for my work because I cannot setup Webpack for MDX compiler within my project, which uses an open-source framework and I have no control of the configs.
exportconstMDXComponent: React.FC<{code: string;frontmatter: Record<string,any>;}>=({ code })=>{constComponent=useMemo(()=>getMDXComponent(code),[code],);return(<MDXProvidercomponents={{Text: ({ children })=><p>{children}</p>}}><Component/></MDXProvider>);};
What you did
I'm following MDX provider from the official MDX guide, and I would expect Parent.mdx can be compiled and run by React successfully.
What happened
It actually throws the following error in run-time:
Expected component `Text` to be defined: you likely forgot to import, pass, or provide it.
Problem description
It is unclear why the components are not passed to downstream MDX files. The Component Substitution section in this repo only gives an example to pass components to Component, which is cumbersome to pass down components if you have nesting MDX files.
After spending couple of hours diving into the unminified genereated code and source code of @mdx-js/es-build, I think I found the root cause.
When providerImportSource: '@mdx-js/react', the generated JS bundle merges the components from @mdx-js/react's useMDXComponents with the components from the props.
If we don't specify useMDXComponents in the globals, mdx-bundler will ship useMDXComponents as well as React.createContext to the bundle.
Now when the app render MDXComponent, MDXProvider has its own useMDXComponents and uses a different version of React.createContext. Because MDXProvider cannot alter the React.context for components in the MDX bundled code, components cannot be accessed in nested MDX files unless you manually pass components down.
Suggested solution
I think it would be nice to have a section in the document for the following solution:
Thank you for your work. This library is especially helpful for my work because I cannot setup Webpack for MDX compiler within my project, which uses an open-source framework and I have no control of the configs.
I have a minor suggestion for an opportunity to add an example for Component Substitution with MDXProvider.
mdx-bundler
version: ^9.0.1node
version: 16.18.0yarn
version: 1.22.17Relevant code or config
MDX files
Child.mdx
Parent.mdx
Server
UI
What you did
I'm following MDX provider from the official MDX guide, and I would expect
Parent.mdx
can be compiled and run by React successfully.What happened
It actually throws the following error in run-time:
Problem description
It is unclear why the
components
are not passed to downstream MDX files. The Component Substitution section in this repo only gives an example to passcomponents
toComponent
, which is cumbersome to pass down components if you have nesting MDX files.After spending couple of hours diving into the unminified genereated code and source code of
@mdx-js/es-build
, I think I found the root cause.When
providerImportSource: '@mdx-js/react'
, the generated JS bundle merges the components from@mdx-js/react
'suseMDXComponents
with the components from the props.If we don't specify
useMDXComponents
in the globals,mdx-bundler
will shipuseMDXComponents
as well asReact.createContext
to the bundle.Now when the app render
MDXComponent
,MDXProvider
has its ownuseMDXComponents
and uses a different version ofReact.createContext
. BecauseMDXProvider
cannot alter the React.context for components in the MDX bundled code,components
cannot be accessed in nested MDX files unless you manually passcomponents
down.Suggested solution
I think it would be nice to have a section in the document for the following solution:
Server
UI
The text was updated successfully, but these errors were encountered: