Injecting components - TypeError: {}.resolve is not a function

[khanakia]

I am trying to inject the Provider component in Next.js 14 using this example https://mdxjs.com/guides/injecting-components/

Also I have tried removing the import.meta.resolve keyword it still does not works.

async function getContent() {
  const code = String(await compile(`
  import Tooltip from '@/raw/components/Tooltip';

  Hello

<Tooltip text='this is a sentence'>
  Hover over this text and see for yourself.
</Tooltip>
  `, {
    outputFormat: 'function-body',
    development: false,
    providerImportSource: import.meta.resolve('../../../../mdx-components.js')
    /* …otherOptions */
  }))

  const mdxModule = await run(code, {...runtime, baseUrl: import.meta.url})
  return {
    MDXContent: mdxModule.default,
  }
  
}

 ⨯ src/app/docs/tooltip/page.tsx (26:38) @ resolve
 ⨯ TypeError: {}.resolve is not a function
    at getContent (./src/app/docs/tooltip/page.tsx:33:36)
    at PrivacyNextPage (./src/app/docs/tooltip/page.tsx:46:34)
    at async Promise.all (index 0)
    at async Promise.all (index 0)
    at async Promise.all (index 0)
digest: "1493623488"
  24 |     outputFormat: 'function-body',
  25 |     development: false,
> 26 |     providerImportSource: import.meta.resolve('../../../../mdx-components.js')
     |                                      ^
  27 |     /* …otherOptions */
  28 |   }))
  29 |

[wooorm]

a) you likely don’t need to follow that guide. That guide is for when you want to do yourself what Next already does for you. Use next/mdx.
b) Next doesn’t support import.meta.resolve. Again, you don‘t need to do this. But if you’d have to do this, either make sure Next supports import.meta.resolve or use an alternative such as import-meta-resolve, or pass a file URL (new URL(...).href)

[wooorm]

Also there is one more typesafe error

Yes, you have a type error because your types are not correct. Type your useMDXComponents correctly

[khanakia]

Yes, I see your point i can pass the Button manually but can I resolve it automatically somehow just the same way Next.js does?

[khanakia]

The types are correct actually the run function needs the MDXComponents itself but you asked me to pass the useMDXComponents(components: MDXComponents) which accepts the components param that's why types are mismatched

[wooorm]

i can pass the Button manually but can I resolve it automatically somehow just the same way Next.js does?

Why not put it in mdx-components? Why else do you want that file?

[wooorm]

the run function needs the MDXComponents

No. run does not need MDXComponents.
Please look at your own function and our types. They are different.

mdx/packages/mdx/lib/util/resolve-evaluate-options.js

Line 43 in efeb479

* @callback UseMdxComponents

[khanakia]

I modified the below code and working fine.

But the whole reason I wanted to do the provider or injection approach so I do not have to Pass the components manually.
I just want the button automatically injected just the way Next.js does e.g. src/app/hello/page.mdx

import { Fragment } from 'react';
import { compile, run } from '@mdx-js/mdx';
import * as runtime from 'react/jsx-runtime';
import Button from '@/components/button';

async function getContent() {
  const code = String(
    await compile(
      `
        Hello World !
        <Button />
        `,
      {
        outputFormat: 'function-body',
        development: false,
      },
    ),
  );

  const mdxModule = await run(code, {
    ...runtime,
    baseUrl: import.meta.url,
    Fragment: Fragment,
  });

  return {
    MDXContent: mdxModule.default,
  };
}

export default async function PrivacyNextPage() {
  const { MDXContent } = await getContent();
  return (
    <article className='prose mx-auto'>
      <MDXContent
        components={{
          Button,
        }}
      />
    </article>
  );
}

[wooorm]

But the whole reason I wanted to do the provider or injection approach so I do not have to Pass the components manually.

If you are going to use the default providers, you still need to define components in them.

If you are using the guide that you are, on how to inject components, you still need to inject components from your manual provider.

Providers have nothing to do with this goal you state. Components still come from somewhere.

I just want the button automatically injected just the way Next.js does.

This question has nothing to do with injecting components. What you see is unrelated to Next. It is how JavaScript/bundlers works.

What you ask for, is how to be able to explicitly import components from MDX, while using compile and run.

That is of course possible. But cannot work how you think it’ll work.