Avatar MDX file not included in build

I noticed that when the design system is built, it leaves the Avatar.stories.mdx file out of the build. This leaves this component out of the UI of the app.

This seems to be the case in the screenshot in the Distribute docs as well:

How do we go about getting the mdx file included in the build?

[jonniebigodes]

@stephyswe i’ve skimmed through the existing documentation and it seems that there are still some lingering issues, as it’s not accurate, there are some things that need to be addressed as with the recent release of 5.3 with new configuration available. It’s my belief that the team behind Storybook focused on the development and release of the said version to make not only the configuration more approachable, leaner and simpler to use. And the documentation would be rolled out incrementally as soon as all items are vetted to avoid misleading the readers. I think that this is going to be fixed shortly.

[tmeasday]

@domyen, yes right now we transpile the .stories.js files and place them inside the package that is published to npm. This allows consumers to import those stories without needing to share babel configs etc with the author of the npm package.

So far so good. But when it comes to mdx, there is no babel plugin you can use to compile it to ES5, as the storybook mdx loader has a bunch of smarts that run at load time. So we’d have to ship them in the npm package unmodified, which would then mean if someone was to import them they’d have to have a similar webpack/babel setup to the package author. It might work in a lot of cases but it would be seriously confusing when it didn’t.

This will be fixed with the composition feature which uses a different approach that avoids these problems.