Блог

Я пытаюсь добавить поддержку .MDX в Nx для Storybook, используя пакет @storybook / addon-docs, но не работает.

Я имею в виду документацию по пакету NPM (https://www.npmjs.com/package/@storybook/addon-docs#preset-options ) поскольку документация Nx скудна, а документация сборника рассказов сбивает с толку.

Версия Nx, которую я использую, — 12.6.5 для Angular и 6.3.7 для Storybook.

Это май 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;
  },
};
 

А также это мой preview.js конфигурационный файл:

 import '@angular/localize/init';

import { DocsContainer, DocsPage } from '@storybook/addon-docs';

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },

  docs: {
    container: DocsContainer,
    page: DocsPage,
  },
};
 

У кого-нибудь есть решение?