MDXContent is throwing error saying nothing was returned

[TheColorRed]

I am using storybook to add an addon which uses MDX. My code is similar to the docs, I import an mdx file, and pass it to the addon. storybook passes the data to the addon and I access it (as seen below).

The issue that I am facing is that I am getting this error:

Uncaught Error: MDXContent(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

import { MDXProvider } from '@mdx-js/react';
import { addons, types } from '@storybook/addons';
import React from 'react';


addons.register('my-api', (api) => {
  addons.add('my-api/tab', {
    type: types.TAB,
    title: 'API',
    route: ({ storyId, refId }) => (refId ? `/api/${refId}_${storyId}` : `/api/${storyId}`),
    match: ({ viewMode }) => viewMode === 'api',
    render: () => {
      const Page = api.getCurrentStoryData()?.parameters?.api?.page;
      // console.table('md', typeof Page, Page, typeof Page === 'function' ? Page() : undefined);
      return (
        <div>
          {
            typeof Page === 'undefined' ?
              <h2>No API setup for this Story.</h2> :
              <Page />
          }
        </div>
      );
    },
  });
});

Note: I have also tried this: <MDXProvider><Page /></MDXProvider>

Then in the story I have this:

import Api from './button.api.mdx';

export default {
  parameters: {
    api: { page: Api }
  }
} as Meta;

I have asked on storybook and on stackoverflow but I have yet to get any answers on this.

[wooorm]

I don’t see any MDX being used.
It helps if you cut down everything except the stuff that causes errors.
You’ll likely be best helped by Storybook folks: this is not an error that has been seen with MDX on its own.
One idea is that MDX in Storybook is, I believe, on V1. And we’re on V2. Perhaps you’re mixing versions, and downgrading the provider to v1 will help.

[TheColorRed]

@wooorm The mdx that is used is in the second code block, and it is passed to the addon through an object.

It is then retrieved like this:

const Page = api.getCurrentStoryData()?.parameters?.api?.page;

the value of Page is:

ƒ result() {
        // eslint-disable-next-line no-eval
        var f = eval("(".concat(sourceSanitized, ")"));
        return f.apply(void 0, arguments);
      }

like you said they might be on mdx version 1 which I will also look into.

[wooorm]

That looks like really weird storybook output, not something that MDX generates.