Estoy tratando de agregar compatibilidad con .MDX en Nx para Storybook usando el paquete @storybook/addon-docs, pero no funciona.

Tengo en cuenta la documentación del paquete NPM ( https://www.npmjs.com/package/@storybook/addon-docs#preset-options ) ya que la documentación de Nx es escasa y la documentación de Storybook es confusa.

La versión de Nx que estoy usando es 12.6.5 para Angular y 6.3.7 para Storybook.

Este es el archivo de configuración may main.js:

 const rootMain = require('../../../.storybook/main'); module.exports = { ...rootMain, core: { ...rootMain.core, builder: 'webpack5' }, stories: [...rootMain.stories, '../src/lib/**/*.stories.@(js|jsx|ts|tsx|mdx)'], addons: [...rootMain.addons], webpackFinal: async (config, { configType }) => { // apply any global webpack configs that might have been specified in .storybook/main.js if (rootMain.webpackFinal) { config = await rootMain.webpackFinal(config, { configType }); } // add your own webpack tweaks if needed config.module.rules.push({ test: /\.(stories|story)\.mdx$/, use: [ { loader: 'babel-loader', }, { loader: '@mdx-js/loader' }, ], }); config.module.rules.push({ test: /\.(stories|story)\.[tj]sx?$/, loader: require.resolve('@storybook/source-loader'), exclude: [/node_modules/], enforce: 'pre', }); return config; }, };

Y también este es mi archivo de configuración preview.js:

 import '@angular/localize/init'; import { DocsContainer, DocsPage } from '@storybook/addon-docs'; export const parameters = { actions: { argTypesRegex: '^on[AZ].*' }, docs: { container: DocsContainer, page: DocsPage, }, };

¿Alguien tiene una solución?