Storybook does not show any stories!

[devbucket]

I tried adding Storybook into a newer project. I have used Storybook before, but the last version I was running was 5.3.18. Today I did a fresh install. But after everything was set up and running, the Storybook app does not show many any of the created stories:

The main.js looks like this:

module.exports = {
  stories: [
    '../src/**/*.stories.js'
  ],
  addons: [
    '@storybook/addon-essentials',
    '@storybook/addon-links'
  ],
}

I have now 1 very simple story in my project that should show up as configured:

The path to it is ./src/common/components/Badge/Badge.stories.js from the project root. Storybook runs without an issue:

And the story is also very simple:

import { Badge } from './Badge';

export default {
  title: 'Badge',
  component: Badge,
};

There are no errors reported or anything that could lead me to any potential cause.

[j3rem1e]

You doesn't export any stories. You should maybe add :

export const Default = (args) => <Badge {...args}/>

The syntax depends on your framework, I assumed it's React.

[devbucket]

@j3rem1e thanks for the advice. But that does still have the same result. No stories showing up. The file now looks like this:

import React from 'react';
import { Badge } from './Badge';

export default {
  title: 'Badge',
  component: Badge,
};

const Story = (args) => <Badge {...args} />;

export const Default = Story.bind({});
Default.args = {
  text: '12',
};

[phated]

@devbucket Can you provide a simplified example as a repository someone can pull down and look into?

[devbucket]

@phated Certainly I can. Here you go: https://github.com/devbucket/storybook-example

I left the example stories in there to demonstrate that it does not even show these. The only file that is shown is the Introduction.stories.mdx.

I also created an example component and added Stories definition to it in ./src/components/Badge/Badge.stories.js

[shilman]

@devbucket it's some problem with your babel config. when i remove that file, the stories show up fine.

[devbucket]

@shilman The babel config was created by CRA. We can't run the project without it. Is there a possibility to tell Storybook to use another babel config in any way?

[shilman]

@devbucket is that the default CRA behavior now or did you run it with some special options?

you should be able to create a babel config in the .storybook folder and it will take precedence over the project root config.

[devbucket]

I found it. It is the env.development section of the babel configuration. Specifically the react-refresh/babel definition. If I remove this, everything works. So, is Storybook maybe not compatible with react-refresh?

[devbucket]

And it doesn't matter if it sits in the env section or inside the main plugins. Every time the react-refresh/babel plugin is added, JS-based stories don't show it.

[shilman]

Storybook supports fast refresh with a webpack plugin. I think that gets automatically disabled with CRA, but I'm not sure how it all works cc @tooppaaa @mrmckeb

[devbucket]

To enable fast refresh, you need a webpack plugin and a babel plugin. Actually, we ejected CRA quite a while ago. I was only mentioning this because of that babel config, which came from it originally. I have the webpack plugin installed in my example, so this doesn't seem to be a problem. Only the babel plugin causes an issue here. It would be great if you could check this out. There seems to be an issue with this.

[devbucket]

Is there any news here? We really would love to continue with Storybook and would not want to downgrade to an older version of either Webpack or Storybook.

[phated]

The webpack 4/5 builder stuff might have relevance here (unknown??) - We recently released initial support for webpack 5 through an opt-in process. You can check out the details at https://gist.github.com/shilman/8856ea1786dcd247139b47b270912324

🤞 here's to hoping it helps.

[shilman]

@devbucket when i create a CRA app it doesn't have any babel config in the root directory. so you have a custom babel config in your project root, and you have the ability to modify the babel config however you want in storybook by creating a custom config in the .storybook folder. i think you have all the tools you need to move forward.

[devbucket]

@phated thanks, I will give that a try as a last resort.

[devbucket]

@shilman As I already wrote, creating a custom babel config in .storybook folder does NOT work. Whatever I put there, I always get the same result. And as I said before, it is NOT related to CRA. That was only the origin. We ejected CRA and changed it of course during the past years. We use a template for all our projects in our company.
With older webpack and storybook versions everything works fine in older projects we have.

[devbucket]

@phated, @shilman - I tried multiple times in every possible way to configure the project to make it work:

• custom .babelrc.js in the .storybook folder
• custom babel.config.js in the .storybook folder.

Please look at the recent set up at https://github.com/devbucket/storybook-example

The only thing that helps is removing react-refresh from the main babel.config.js in line 47. Everything else produces the same output. Can you try for yourself and confirm that? So there must be an issue with react-refresh. I don't know what to do. This is the most basic project setup I can think of. And still storybook fails to show any of the stories.

[devbucket]

@phated Any news on this one?

[shilman]

@devbucket there's definitely a bug here. @ndelangen poked around a bit and we have a workaround, which is to add the following to your main.js:

module.exports = {
  babelDefault: async () => {
    return {
      compact: true,
      presets: ["@babel/preset-env", "@babel/preset-react"],
    };
  },
}

Embarrassingly, we don't know exactly why this is working or why the other solutions are failing. We'll need to spend some time reworking the babel config section of the code, but for now I'm classifying this as "has workaround" and prioritizing the fix.

[devbucket]

I can confirm that this solution works now. At least we can continue with our project. Thank you very much.

[ndelangen]

@shilman I'd like to drop all this code in 7.0:

storybook/lib/core-common/src/utils/load-custom-babel-config.ts

Lines 79 to 93 in 32c6356

	const babelConfig =
	loadFromPath(path.resolve(configDir, '.babelrc')) ||
	loadFromPath(path.resolve(configDir, '.babelrc.json')) ||
	loadFromPath(path.resolve(configDir, '.babelrc.js')) ||
	loadFromPath(path.resolve(configDir, 'babel.config.json')) ||
	loadFromPath(path.resolve(configDir, 'babel.config.js'));
	if (babelConfig) {
	// If the custom config uses babel's `extends` clause, then replace it with
	// an absolute path. `extends` will not work unless we do this.
	if (babelConfig.extends) {
	babelConfig.extends = path.resolve(configDir, babelConfig.extends);
	}
	return babelConfig;
	}

in regards to configuration storybook should move towards a world where everything is configured in 1 place: main.js (eventually just storybook.config.js in the project root.

No 'magic' webpack.config.jsorbabel.config.js` loading.

main.js is a JS file, users have can load sub config files and compose them manually if desired.

[shilman]

Closing this in favor of #14425