MDX2 Import md files

[sir-captainmorgan21]

Hi,

What is the new way to import md files with MDX. Before, I would import and use the md file like so. You can see where I import the CHANGELOG.md file and reference it like a component below.

// example.mdx
import { Meta } from "@storybook/addon-docs";
import OverviewTab from "./overview.mdx";
import ApiTab from "./api.mdx";
import ExamplesTab from "./examples.mdx";
import ChangeLog from '../../../CHANGELOG.md';
import { TabGroup, TabList, TabHeading, TabPanels, TabPanel } from '@web.co2/mdx/tabs.mdx';
import { PackageJson } from './package-json.js';

<Meta
  title="Components/Button/Docs"
  parameters={{
    previewTabs: { 
      canvas: { hidden: true } 
    }
  }}/>

# Button
<code>{PackageJson.name} {PackageJson.version}</code>

<TabGroup>
  <TabList>
    <TabHeading>Overview</TabHeading>
    <TabHeading>Api</TabHeading>
    <TabHeading>Examples</TabHeading>
    <TabHeading>Changelog</TabHeading>
  </TabList>
  <TabPanels>
    <TabPanel>
      <OverviewTab/>
    </TabPanel>
    <TabPanel>
      <ApiTab/>
    </TabPanel>
    <TabPanel>
      <ExamplesTab/>
    </TabPanel>
    <TabPanel>
      {<ChangeLog/>}
    </TabPanel>
  </TabPanels>
</TabGroup>

When I do this with MDX2, I get the following error. It looks like MDX is not trying to insert the Changelog content as an element?

react-dom.production.min.js:189 DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('# Changelog

All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.

## [6.0.0](https://github.com/Snagajob/Web.CO2/compare/button-v5.2.0...button-v6.0.0) (2023-02-16)


### ⚠ BREAKING CHANGES

* converted to orion 2.0 buttons

### Features

* converted to orion 2.0 buttons ([b8d95a8](https://github.com/Snagajob/Web.CO2/commit/b8d95a804d3be4485b4b6b5cd1be73d7536e8945))
..........

[ChristianMurphy]

Nothing changed in how MDX handles file imports between version 1 and 2.
Markdown and MDX files can be imported if your build tool is configured to support it.
If there is a change it would likely be in the integration/build tool you are using.

Which build tool are you using?
Could you share an example? Ideally in a sandbox like: https://codesandbox.io/ or https://stackblitz.com/

[sir-captainmorgan21]

@ChristianMurphy thanks for responding so quickly. I am using this with Storybook, so let me see if I can dig and see what they use.

[sir-captainmorgan21]

So it looks like they are using "@mdx-js/react": "^2.1.5"

[ChristianMurphy]

Thanks @sir-captainmorgan21!
Some context, @mdx-js/react transforms MDX into JS/react components, it does not handle resolving the imports.
Resolving imports (like .md and .json files) is handled by storybook and webpack.

I strongly suspect this is related to storybookjs/storybook#13144 (which I see you are already aware of) and/or storybookjs/storybook#19180.

[sir-captainmorgan21]

@ChristianMurphy Ahh ok. Makes sense. Ill keep an eye on those issues. Thanks!