Adding mdx files causes ModuleParseError

[sderickson]

First of all, thanks for this great boilerplate! I've been using it the last couple months and it's a well-put-together setup. I really appreciate you putting this out there and actively maintaining it 🙏

So, I'm looking to add mdx files to my project, but yarn start breaks when I do. For reference I copied 01e497546b5328dd6c40422260e0147bab841be8 and so I see you have since added mdx support in https://github.com/KaiHotz/react-rollup-boilerplate/commit/bd447c3fbe7b1d2714cd3dc08224c2a6f4194bb9. I tried applying these changes and some other dep updates in your other commits but I'm still running into it. I then cloned this repo and tried adding an mdx file and I see the same error, so perhaps there's a bug in the setup?

Steps to repro:

1. Add new file /src/components/Button/Test.story.mdx
2. Put a single line in: # hello mdx.
3. Run yarn start

Expected: Storybook starts and includes a Test page with markdown file contents rendered.

Actual: yarn start errors:

yarn run v1.22.19
$ NODE_ENV=development BABEL_ENV=development yarn storybook
$ storybook dev -p 6006
@storybook/cli v7.0.18

info Found existing addon {"name":"@storybook/addon-docs","options":{"configureJSX":true,"babelOptions":{},"sourceLoaderOptions":null,"transcludeMarkdown":true}}, skipping.
info Found existing addon {"name":"@storybook/addon-docs","options":{"configureJSX":true,"babelOptions":{},"sourceLoaderOptions":null,"transcludeMarkdown":true}}, skipping.
info => Starting manager..
WARN No story files found for the specified pattern: src/components/**/*.stories.mdx
WARN No story files found for the specified pattern: src/components/**/*.stories.@(js|jsx|ts|tsx)
info Addon-docs: using MDX2
info => Using implicit CSS loaders
info => Using default Webpack5 setup
<i> [webpack-dev-middleware] wait until bundle finished
99% end closing watch compilationWARN Force closed preview build
ModuleParseError: Module parse failed: Unexpected character ' ' (1:1)
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
> # hello mdx
    at handleParseError (/Users/scott/src/react-rollup-boilerplate/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:742:23)
    at /Users/scott/src/react-rollup-boilerplate/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:844:9
    at processResult (/Users/scott/src/react-rollup-boilerplate/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:598:14)
    at /Users/scott/src/react-rollup-boilerplate/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:647:9
    at /Users/scott/src/react-rollup-boilerplate/node_modules/loader-runner/lib/LoaderRunner.js:368:5
    at iterateNormalLoaders (/Users/scott/src/react-rollup-boilerplate/node_modules/loader-runner/lib/LoaderRunner.js:213:12)
    at /Users/scott/src/react-rollup-boilerplate/node_modules/loader-runner/lib/LoaderRunner.js:205:7
    at /Users/scott/src/react-rollup-boilerplate/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:627:20
    at Array.eval (eval at create (/Users/scott/src/react-rollup-boilerplate/node_modules/tapable/lib/HookCodeFactory.js:28:14), <anonymous>:12:1)
    at runCallbacks (/Users/scott/src/react-rollup-boilerplate/node_modules/@storybook/builder-webpack5/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:18:17)
    at /Users/scott/src/react-rollup-boilerplate/node_modules/@storybook/builder-webpack5/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:149:7
    at /Users/scott/src/react-rollup-boilerplate/node_modules/graceful-fs/graceful-fs.js:123:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3)

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

info Found existing addon {"name":"@storybook/addon-docs","options":{"configureJSX":true,"babelOptions":{},"sourceLoaderOptions":null,"transcludeMarkdown":true}}, skipping.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[KaiHotz]

@sderickson Thanks, glad it is of use for you. I am looking into this but if you fnd a solution for it please don't hassitate to open a PR, all contributions are welcome

[KaiHotz]

@sderickson This should be resolved now.

The problem was that the custom webpack config was overiding the rules that come by default from storybook webpack config, somehow there is a problem to merge them with the custom rules. Therefore the mdx loaders for webpack where not lodead. I figured that the cutom rules are redundant.

The solution: i added vite as a dev dependency and @storybook/react-vite to build and render stortybook correctly. It should not affect your component library buld.