Storybook: Manual Config of Docs not working.

[lpoulter]

Describe the bug
After following the instructions here on a fresh install of storybook. The app compiles but the interface hangs with no errors.

To Reproduce
npx -p @storybook/cli sb init
yarn add -D @storybook/addon-docs
yarn add -D react react-is babel-loader
Make the changes here
Expected behavior
The app to load with the docs addon working.

Screenshots

Code snippets
Main.js

module.exports = {
  stories: ["../src/**/*.stories.js"],
  addons: [
    "@storybook/preset-create-react-app",
    "@storybook/addon-actions",
    "@storybook/addon-links",
    "@storybook/addon-docs/register"
  ]
};

const createCompiler = require("@storybook/addon-docs/mdx-compiler-plugin");

module.exports = {
  webpackFinal: async config => {
    config.module.rules.push({
      test: /\.(stories|story)\.mdx$/,
      use: [
        {
          loader: "babel-loader",
          // may or may not need this line depending on your app's setup
          options: {
            plugins: ["@babel/plugin-transform-react-jsx"]
          }
        },
        {
          loader: "@mdx-js/loader",
          options: {
            compilers: [createCompiler({})]
          }
        }
      ]
    });
    config.module.rules.push({
      test: /\.(stories|story)\.[tj]sx?$/,
      loader: require.resolve("@storybook/source-loader"),
      exclude: [/node_modules/],
      enforce: "pre"
    });
    return config;
  }
};

Preview.js

import { addParameters } from "@storybook/react";
import { DocsPage, DocsContainer } from "@storybook/addon-docs/blocks";

addParameters({
  docs: {
    container: DocsContainer,
    page: DocsPage
  }
});

[raikusy]

I am facing the same issue. Any idea how to fix it? It's happening after upgrading to v5.3.9

[lpoulter]

I tested this with a clean install of 5.3 and the bug is still there. I suspect the config in the docs are wrong or missing something.

[shilman]

Yeah I think the docs need updating. Can you share a repro repo if you have one handy?

[lpoulter]

Example Repo https://github.com/lpoulter/doc-mdx-bug

[shilman]

Thanks I’ll take a look! 🙏

[shilman]

The docs are actually correct-ish, just unclear. I've updated them in https://github.com/storybookjs/storybook/pull/9638

The bug is here:

https://github.com/lpoulter/doc-mdx-bug/blob/master/.storybook/main.js#L9-L13

The code is overwriting module.exports, so module.exports.stories is undefined. @ndelangen is it easy to detect this case in Storybook and show a "no stories loaded" state to help users debug cases like this? Right now, the UI just hangs in a not-very-helpful way.

@lpoulter would you mind reviewing the PR and let me know if it makes more sense? Thanks for you help & patience!

[lpoulter]

That was pretty clear to see but hadn't occurred to me, thanks very much.

[shilman]

No worries. Everything’s clear in hindsight. Closing this!