How to troubleshoot storybook not loading stories?

The main.js in your ./storybook folder contains the line stories: ['../src/**/*.stories.jsx?'], since your story is named Histogram.stories.js it should be like below.

module.exports = {
  stories: ['../src/**/*.stories.js']
};

I tried replicating this in my code by using your main.js and the exact same thing happened to me as well. Also adding the ? like this stories: ['../src/**/*.stories.js?'] gives the same error

Edit- you can check for both .js and .jsx by modifying the line like this stories: ['../src/**/*.stories.js(x)?']

Edit (24/7/2021) - As of today while installing storybook with npx sb init and choosing react as the template it automatically adds the below snippet in the main.js file

module.exports = {
  "stories": [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials"
  ]
}

which solves for this issue

I had this same problem of "stories not showing up in storybook UI" that brought me here. Turns out, I had pasted in some test code that set a regEx on "excludeStories" to filter out any story function with the word "Data" in it. Of course, my disappearing story was named "StoryWithData", so it was excluded.

This took me way too long to figure this out, so posting here in case helps someone else.

export default {
  component: Footer,
  title: "App/Footer",
  excludeStories: /.*Data$/,  // -> this will filter out functions named like  "*Data"
}

Removing the node_modules/.cache/storybook folder and restarting Storybook is what worked for me.

Resave save the story file. It makes the component reappear in side panel, and then you can see the errors.

start-storybook seems to fail silently. But you can troubleshoot errors by resaving files one by one.