How to configure mdx loader for storybook webpack5

[tvo]

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 https://webpack.js.org/concepts#loaders

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!

[simoncrypta]

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 !

MDX+Vite guide (with workaround for Jest)

MDX+Redwood+Vite (now with a workaround for Jest) @mdx-js/rollup plugin Install the plugin at the Redwood project root (not under the web workspace) with yarn add @mdx-js/rollup In theory you should be able to import the plugin and add it to vite.config.ts plugins array. In theory … In practice, you’ll run into a CSJ vs ESM module incompatibility issue. There are 2 ways resolve this. The first involves adding "types: "module" to web/package.json. The second involves using dynamic import…

[tvo]

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

[simoncrypta]

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

Did you try this plugin with transcludeMarkdown: true ?

Docs Addon | Storybook: Frontend workshop for UI development

    {      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 :

Webpack

[tvo]

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$/')

    config.module.rules.push({
      test: /\.mdx$/,
      use: ['@mdx-js/loader'],
    })

    return config
  },
}