Estoy tratando de crear un complemento para el libro de cuentos que agrega una pestaña en la parte superior de la página, lo tengo funcionando, excepto que no puedo hacer que represente un archivo MDX en el área de vista previa.

El archivo Addon contiene el siguiente 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> ); }, }); });

El React anterior fue tomado deeste ejemplo . El registro de mi consola genera lo siguiente:

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

En la historia con la que estoy configurando esto, los datos de la página se ven a continuación. Importo la api y la paso a los parámetros. A partir de ahí, el complemento obtiene los datos y debe generar el archivo.

 import Api from './button.api.mdx'; export default { parameters: { api: { page: Api } } } as Meta;

También recibo el siguiente mensaje de error:

Error no detectado: MDXContent (...): No se devolvió nada del procesamiento. Esto generalmente significa que falta una declaración de devolución. O, para no representar nada, devuelve nulo.

También intenté eliminar <MDXProvider> y acabo de hacer <Page /> , que también me da el mismo error.