Importing TSX / JSX component directly into MDX file.

[rajuashok]

Hi there. I'm using this version: "next-mdx-remote": "^3.0.8"

I'm trying to import a component directly into my .mdx file like so:

import LeagueWithTeam from '../components/LeagueWithTeam';

<Fragment>
  <LeagueWithTeam
  region={region}
  lng={lng}  />
</Fragment>

The file components/LeagueWithTeam.tsx looks roughly like this:

import React from 'react'

const LeagueWithTeam = () => {...}

export default LeagueWithTeam

But when I build this I get the following error: Component LeagueWithTeam was not imported, exported, or provided by MDXProvider as global scope

Is it not possible to import components directly into MDX files?

[noahlst]

Not with this package implementation.

We have to pass components through <MDXRemote>, like this:

import LeagueWithTeam from "components/LeagueWithTeam"

export const components = {LeagueWithTeam}

export default function Page() {
  return (
    <MDXRemote components={components} />
  )
}

This is outlined in the package Readme.

[BRKalow]

As mentioned above, imports are not supported in next-mdx-remote as we treat the content as data, so resolving imports is a non-trivial problem.

related to #48 #143