Storybook: StorySource - Source not loading, tab stuck with "loading source..."

[fgaleano]

Bug or support request summary

"Story" tab only reads: "loading source..." for any and all stories. I looked at all the comments in issue #3626 and none of that made any difference.

I suspect the issue may be related to the fact we have a central location for adding stories instead of adding each at a time on their own file. See config.js file below for the exact code. Is this maybe not supported by StorySource?

Please specify which version of Storybook and optionally any affected addons that you're running

• @storybook/addon-actions: "^5.0.1",
• @storybook/addon-knobs: "^5.0.1",
• @storybook/addon-storysource: "^5.0.1",
• @storybook/react: "^5.0.1",

Affected platforms

Issue happens in both Firefox/Chrome in macOS. Don't think it's browser or even platform related. More like configuration.

Code Snippets

config.js

import "./styles.css";
import React from "react";
import path from "path";
import { configure } from "@storybook/react";
import { getStorybook, storiesOf } from "@storybook/react";
import { withKnobs } from "@storybook/addon-knobs";

let getComponentName = filePath =>
  path
    .dirname(filePath)
    .split(path.sep)
    .reverse()[0];

let getPackageName = filePath =>
  path
    .dirname(filePath)
    .split(path.sep)
    .reverse()[1];

configure(() => {
  // Automatically import all examples
  const req = require.context(
    "../packages",
    true,
    /^((?!node_modules).)*\.example\.js$/
  );

  req.keys().forEach(pathToExample => {
    const { name, Example } = req(pathToExample);
    const componentName = `${getPackageName(pathToExample)}.${getComponentName(
      pathToExample
    )}`;
    storiesOf(componentName, module)
      .addDecorator(withKnobs)
      .add(name, () => <Example />);
  });
}, module);

export { getStorybook };

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.example.js?$/,
        loaders: [require.resolve("@storybook/addon-storysource/loader")],
        enforce: "pre"
      }
    ]
  }
};

Individual story file button.example.js

import React from "react";
import { Button } from ".";
import { action } from "@storybook/addon-actions";

export let name = "Default";

export let Example = () => {
  return (
    <div>
            <Button onClick={action("clicked")} size={Button.SIZE.SMALL}>
              Default
            </Button>
    </div>
  );
};

[shilman]

Good golly!! I just released https://github.com/storybooks/storybook/releases/tag/v5.1.0-alpha.7 containing PR #6104 that references this issue. Upgrade today to try it out!

Because it's a pre-release you can find it on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

[raulfdm]

@shilman Is it'll be fixed for v5.0.x?

I'm having the same issue even after update to v5.0.2 🤔

[raulfdm]

nvm, my config was wrong.

module.exports = function({ config }) {
  config.module.rules.push({
-  test: /\.stories.jsx?$/,
+  test: /\.story.jsx?$/,
    loaders: [require.resolve('@storybook/addon-storysource/loader')],
    enforce: 'pre',
  });

  return config;
};