Cannot Resolve component specified in MDXProvider

[gaurishhs]

Hello! I'm developing a SSG using Vite and MDX. I'm passing some components in MDXProvider but it always gives me the error that component is not passed via props.

Here is the Provider: https://github.com/gaurishhs/documentum/blob/main/packages/documentum/src/theme/DocsLayout.tsx#L45
Bundler: https://github.com/gaurishhs/documentum/blob/main/packages/documentum/src/node/plugin-mdx/pluginMdxRollup.ts#L33

Please help me out..

[wooorm]

hi!

• You probably don’t need a provider. Pass the components directly.
• You use jsxImportSource for @mdx-js/react. That is wrong. jsxImportSource is something different. A provider is not a JSX import source. If you use react, you don’t touch jsxImportSource. If you want a provider, you use providerImportSource: https://mdxjs.com/packages/mdx/#optionsproviderimportsource

[wooorm]

Then provide more info. What errors you're getting.

How to use mdx is in the docs on "Using mdx": https://mdxjs.com/docs/using-mdx/

[gaurishhs]

Just tried. It works without specifying jsxImportSource. Please guide me on passing the components directly.

[wooorm]

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

[gaurishhs]

Well, It doesn't seem to work..

import {
  DocsContent,
  DocsHeader,
  DocsSidebar,
  TabItem,
  Tabs,
  Admonition,
  Code,
  CodeGroup
} from 'ui/lib/esm';
import { MDXProvider } from '@mdx-js/react';
import { Fragment } from 'react';
import { Outlet } from 'react-router-dom';
import { useAppContext, useSidebar } from '@theme/hooks';

export function DocsLayout() {
  const {
    title,
    themeConfig: { navLinks, logo, footer, sidebar }
  } = useAppContext();
  const { isOpen, setSidebarState } = useSidebar();
  const toggleSidebar = (s?: boolean) => {
    if (s) {
      setSidebarState(s);
    } else {
      setSidebarState(!isOpen);
    }
  };
  return (
    <Fragment>
      <DocsHeader toggleSidebar={toggleSidebar} navLinks={navLinks} />
      <DocsSidebar
        title={title}
        sidebar={sidebar}
        setState={toggleSidebar}
        isOpen={isOpen}
        navLinks={navLinks}
        logo={{
          dark: logo?.dark,
          light: logo?.light
        }}
      />
      <div className="dark:bg-zinc-900 bg-white">
        <DocsContent
          components={{
            Tabs,
            TabItem,
            Admonition,
            Code,
            CodeGroup
          }}
          footer={footer}
        >
          <Outlet />
        </DocsContent>
      </div>
    </Fragment>
  );
}

Tried passing the components to DocsContent and to Outlet as well but it doesn't work..

[wooorm]

Are they mdx files?

If you send post to one friend, do you expect it to be delivered to your other friend?

You can pass components to an mdx component. Passing then to random other components doesn't do anything.

[gaurishhs]

No they are not.. Im not importing mdx files they get compiled to Jsx ones

…

On Sun, 15 Jan 2023, 20:08 Titus, ***@***.***> wrote: Are they mdx files? If you send post to one friend, do you expect it to be delivered to your other friend? You can pass components to an mdx component. Passing then to random other components doesn't do anything. — Reply to this email directly, view it on GitHub <#2225 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ASZRZB2HQG6WAXCEB7BYEQ3WSQDU3ANCNFSM6AAAAAAT32DCZA> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[gaurishhs]

Then in routes array React.createElement is used to create elements out of those loadable imports

[gaurishhs]

There is one use case for providers: if you import MDX inside other MDX files and find yourself passing components around a lot. I don’t see you doing that.

Is this necessary? I find implementing direct passing of components much more difficult than simply using a provider. Moreover i wouldn't prefer importing JSX Elements on client-side..

[wooorm]

Can you show the React.createElement call?
You can pass the components there. Because Route0 and Route1 are the MDX components. They accept components.

Is this necessary

Using fast and less code is not necessary, but it’s a good idea.

much more difficult than simply using a provider

It is not more difficult. It is simpler. There is less code.

Moreover i wouldn't prefer importing JSX Elements on client-side..

We probably have different ideas about what “JSX elements” are. You don’t need to use anything client side with MDX. And if you do, you already are.
JSX is compiled away. Just like MDX. No JSX ends up on the client.
If you mean React nodes, then there is no way to remove them on the client (other than SSG / SSR, which does not affect this setup, or RSC, which can’t be used with providers)

[gaurishhs]

Alright. Thank you so much for sparing your time. I passed the components to the React.createElement call and it works.

[wooorm]

No worries! Good luck on your endeavours! :)