'React not rendering an mdxjs file
I am trying to create an addon for storybook that adds a tab to the top of the page, I have it working except that I cannot get it to render an MDX file in the preview area.
The Addon file contains the following JavaScript:
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', {
render: () => {
const Page = api.getCurrentStoryData()?.parameters?.api?.page;
console.log(
'md',
Page,
typeof Page === 'function' ? Page() : undefined
);
return (
<div>
{
typeof Page === 'undefined' ?
<h2>No API setup for this Story.</h2> :
<MDXProvider><Page /></MDXProvider>
}
</div>
);
},
});
});
The above React was taken from this example. My console log outputs the following:
md ƒ result() {
// eslint-disable-next-line no-eval
var f = eval("(".concat(sourceSanitized, ")"));
return f.apply(void 0, arguments);
} undefined
In the story that I am setting this up with, the page data with looks like below. I import the api and pass it to the parameters. From there the addon gets the data and and should render the file.
import Api from './button.api.mdx';
export default {
parameters: {
api: { page: Api }
}
} as Meta;
I am also getting the following error message:
Uncaught Error: MDXContent(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
I have also tried removing <MDXProvider>
and just did <Page />
which also gives me the same error.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|