How to configure mdx loader for storybook webpack5

Hey all,

I have a few pages that are written in markdown as .mdx files (e.g. AboutUs.mdx). These are actual component/page for used on our site. They are NOT stories.mdx files.

It looks like redwood automatically add these mdx pages into the storybook site, and the site fails to load with the following error:

ModuleParseError: Module parse failed: Assigning to rvalue (1:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See

Can someone help me with either

  • setting up mdx loader for webpack with the redwood storybook config (Storybook | RedwoodJS Docs)
  • exclude the mdx pages from my storybook site so I can use sb for other components

Thank you for your help!

Hi @tvo
If I understand correctly, you don’t actually want to configure mdx loader for storybook but to use inside your project.

Someone wrote a guide for that, I hope this will help you !

The opposite. I do want to configure mdx loader to work with storybook. Right now, yarn rw sb crashes on startup unless I comment out my .mdx routes.

And haha, I wrote the guide you’ve just shared :smiley:

Oh! ahah I’m so sorry, I understand now!

Did you try this plugin with transcludeMarkdown: true ?

    {      name: "@storybook/addon-docs",      options: { transcludeMarkdown: true },    },

in your storybook.config.js

or you can maybe customize your webpack config in the same file with webpackFinal :

Here is what I found to workaround the error and allow the storybook server to start:

First yarn add @mdx-js/loader for webpack. Then, create a web/config/storybook.config.js with the following content:

module.exports = {
  webpackFinal: async (config) => {
    // Remove existing mdx rule if any (but should be none)
    config.module.rules = config.module.rules.filter((f) => f.test?.toString() !== '/\\.mdx$/')

      test: /\.mdx$/,
      use: ['@mdx-js/loader'],

    return config