I'm trying to add .MDX support in Nx for Storybook using @storybook/addon-docs package, but doesn't work.

I am keeping in mind the NPM package documentation (https://www.npmjs.com/package/@storybook/addon-docs#preset-options) as Nx documentation is sparse and Storybook documentation confusing.

The Nx version that I'm using is 12.6.5 for Angular and 6.3.7 for Storybook.

This is may main.js config file:

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;
  },
};

And also this is my preview.js config file:

import '@angular/localize/init';

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

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

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

Anyone has a solution?