Storybook React Webpack does not process .mdx files after update to 15.5.2

[alexmbp]

Current Behavior

Storybook can not be build if project has MDX stories:

ERR! => Failed to build the preview
ERR! Module parse failed: Unexpected token (16:0)
ERR! You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

The same setup was working on older Nx 15.4.1.

Expected Behavior

NX Storybook plugin should process .mdx files with no issues.

Github Repo

No response

Steps to Reproduce

1. Update to the latest NX
2. Try building a repo with a MDX stories

Nx Report

Node : 16.14.0
   OS   : darwin x64
   npm  : 9.3.1
   
   nx : 15.5.2
   @nrwl/angular : Not Found
   @nrwl/cypress : 15.5.2
   @nrwl/detox : Not Found
   @nrwl/devkit : 15.5.2
   @nrwl/esbuild : Not Found
   @nrwl/eslint-plugin-nx : 15.5.2
   @nrwl/expo : Not Found
   @nrwl/express : Not Found
   @nrwl/jest : 15.5.2
   @nrwl/js : 15.5.2
   @nrwl/linter : 15.5.2
   @nrwl/nest : Not Found
   @nrwl/next : Not Found
   @nrwl/node : Not Found
   @nrwl/nx-cloud : Not Found
   @nrwl/nx-plugin : Not Found
   @nrwl/react : 15.5.2
   @nrwl/react-native : Not Found
   @nrwl/rollup : 15.5.2
   @nrwl/schematics : Not Found
   @nrwl/storybook : 15.5.2
   @nrwl/web : 15.5.2
   @nrwl/webpack : 15.5.2
   @nrwl/workspace : 15.5.2
   @nrwl/vite : Not Found
   typescript : 4.9.4
   ---------------------------------------
   Local workspace plugins:
   ---------------------------------------
   Community plugins:

Failure Logs

No response

Additional Information

Root Storybook config:

module.exports = {
  staticDirs: [],
  stories: [],
  addons: [
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    '@storybook/addon-links',
    'storybook-addon-designs',
  ],
  features: {
    // https://storybook.js.org/docs/react/writing-docs/docs-page#inline-stories-vs-iframe-stories
    inlineStories: true,
    // https://storybook.js.org/docs/html/builders/webpack#code-splitting
    // https://storybook.js.org/docs/react/configure/overview#feature-flags
    storyStoreV7: true,
    emotionAlias: false,
  },
};

App Storybook config:

const rootMain = require('../../../.storybook/main');

module.exports = {
  ...rootMain,
  core: {
    ...rootMain.core,
    // https://storybook.js.org/docs/html/builders/webpack#webpack-5
    builder: {
      name: 'webpack5',
      options: {
        lazyCompilation: true,
      },
    },
    channelOptions: {
      allowFunction: false,
    },
  },
  stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [...rootMain.addons, '@nrwl/react/plugins/storybook'],
  webpackFinal: async (config, { configType }) => {
    // apply any global webpack configs that might have been specified in .storybook/main.js
    if (rootMain.webpackFinal) {
      // eslint-disable-next-line no-param-reassign
      config = await rootMain.webpackFinal(config, { configType });
    }
    // add your own webpack tweaks if needed
    return config;
  },
};

Storybook tsconfig:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "outDir": ""
  },
  "files": [
    "../../../node_modules/@nrwl/react/typings/styled-jsx.d.ts",
    "../../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
    "../../../node_modules/@nrwl/react/typings/image.d.ts"
  ],
  "include": [
    "../src/**/*.stories.ts",
    "../src/**/*.stories.js",
    "../src/**/*.stories.jsx",
    "../src/**/*.stories.tsx",
    "../src/**/*.stories.mdx",
    "*.js"
  ],
  "exclude": ["../**/*.spec.ts", "../**/*.spec.js", "../**/*.spec.tsx", "../**/*.spec.jsx"]
}

[mthines]

I'm experiencing the same thing.

Downgrading to 15.4.0 temporarily fixes the issue for me :)

[mandarini]

Oh that's a shame. Can you please create a reproduction for me and send it to me? I have not used .mdx before, so it would be super helpful if you could send me a repo! :) @mthines @alexmbp

[mauris]

+1 encountered the same while looking at #14455. I had to remove the @nrwl/react/plugins/storybook addon for Storybook in order for the MDX files to show up properly.

[mandarini]

Ohhhh I see. Interesting. Ok that's something to look into. Still, can I have a repro repo with mdx, and I'll make sure I'll fix these tomorrow! Sorry folks!

[mandarini]

I updated/cleaned-up the @nrwl/react/plugins/storybook in this PR, so maybe that will fix it. If not, please @mauris @mthines send me a reproduction of your problem, because I'm really interested in solving it!

[mthines]

Hey @mandarini.
Is this fix included in a patch NPM version, so I can test it easily? :)

The project I'm sitting with can't be shared, so creating a sharable reproduction would sadly require some work :)

[mandarini]

@mthines no, it's not included in a patch yet, I just pushed this PR. I will post here once it's in a patch.

Regarding the reproduction, I just meant like a super simple repository with Storybook and a simple mdx story that works. Take your time, let me know! :)

[mthines]

@mandarini sure!
I'll see if I can create one quickly :)

[mthines]

Hey @mandarini .

Okay, it was fairly quickly 😂

Here you go
https://github.com/mthines/nx-storybook-mdx-issue

To reproduce.

npm install
npx nx run nx-storybook-mdx-issue:storybook

To me this looks like a classic Webpack Loader issue with the file extension not being recognized and therefore not handled correctly.

Let me know if I can help with anything! 💪

And thank you for you guys awesome work with NX ❤️

[jaysoo]

Adding @storybook/addon-docs addon to the root .storybook/main.js file works, but I'm not sure why it's not there by default. It doesn't seem to be required at all with just @storybook/addon-essentials.

Also works if docs: true is explicitly set:

addons: [{ name: '@storybook/addon-essentials', options: {docs: true} }]

[jaysoo]

I found the problem. Because in 15.5 we provided defaults for the CLI options, it is being set to false rather than undefined, so Storybook is not enabling the docs addon.

https://github.com/nrwl/nx/blob/master/packages/storybook/src/executors/build-storybook/schema.json#L83-L87

We just need remove the default and let Storybook apply its own defaults. :)

[mthines]

@jaysoo
Perfect, thanks for the swift fix 💪

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.