Storybook: Storybook for HTML cannot import components

[emanuelepane]

I am trying to use Storybook for HTML.

I want to follow the CSF approach and keep component and stories separated.
These are my doc references:

• https://storybook.js.org/docs/guides/guide-html/#step-4-write-your-stories
• https://storybook.js.org/docs/basics/writing-stories/#basic-story
• https://storybook.js.org/docs/basics/writing-stories/#story-file-location

To Reproduce
Steps to reproduce the behavior:

1. Install Storybook for HTML (5.3.18 at time of this writing)
2. Set up a basic button.stories.js and watch it work with npm run storybook

// button.stories.js
export default { 
    title: 'Button',
};

export const Button = () => '<a class="myclass-btn" role=button>Start</a>';

1. Create a simple button component, adjust the code to import it (see https://storybook.js.org/docs/guides/guide-html/) and run npm run storybook

// button.stories.js
import Button from "./button";

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

// button.js
export const Button = () => '<a class="myclass-btn" role="button">Start</a>';

1. See error

WARNING in ./src/components/button/button.stories.js 4:13-19
"export 'default' (imported as 'Button') was not found in './button'
 @ \.)(?=.)[^/]*?\.stories\.js)$ (./src sync ^\.\/(?:(?:|\/|(?:(?:(?!(?:|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.js)$)
 @ ./.storybook/generated-entry.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./.storybook/preview.js ./.storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true
Child HtmlWebpackCompiler:
                          Asset      Size               Chunks  Chunk Names
    __child-HtmlWebpackPlugin_0  6.33 KiB  HtmlWebpackPlugin_0  HtmlWebpackPlugin_0
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core/dist/server/templates/index.ejs] 2.12 KiB {HtmlWebpackPlugin_0} [built]

Expected behavior
The Button is imported

System:

Environment Info:

  System:
    OS: macOS 10.15.3
    CPU: (8) x64 Intel(R) Core(TM) i7-8569U CPU @ 2.80GHz
  Binaries:
    Node: 12.16.1 - /usr/local/bin/node
    Yarn: 1.22.0 - /usr/local/bin/yarn
    npm: 6.13.4 - /usr/local/bin/npm
  Browsers:
    Chrome: 80.0.3987.149
    Firefox: 72.0.1
    Safari: 13.0.5
  npmPackages:
    @storybook/addon-docs: ^5.3.18 => 5.3.18 
    @storybook/addon-notes: ^5.3.18 => 5.3.18 
    @storybook/html: ^5.3.18 => 5.3.18 
    @storybook/preset-scss: ^1.0.2 => 1.0.2 

[shilman]

@emanuelepane did you try:

import { Button } from "./button";

[emanuelepane]

Thank you @shilman yes I did!

As a result, the warning goes away, which is great and I understood why by looking it up (thanks!).

However there is no actual Button displayed in Storybook.
What am I missing here?

[yannbf]

Hey @emanuelepane, the reason you're not seeing anything is because you're not exporting any variation of your button.

This worked because there was a named export defined in your story file:

// button.stories.js
export default { 
    title: 'Button',
};

export const Button = () => '<a role=button>Start</a>'; // <-- named export

In your second case, there was none.

// button.stories.js
import Button from "./button";

// missing named export, could be fixed with this:
// export { Button };

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

Usually in stories you have multiple variations of a base component, so it's common to see multiple named exports, one for each variation. For example:

// button.js
export const Button = (text = '') => {
  const btn = document.createElement('button');
  btn.innerHTML = text;
  return btn;
};

// button.stories.js
import { Button } from "../components/button";

export const Empty = () => new Button();
export const WithText = () => new Button('Hello World');

export default {
  title: 'Buttons',
  component: Button
};

The component property in your default export is not used to render a story, but rather to define it as a base component for other features like showing the props table automatically in addon-docs, etc.

[yannbf]

Please refer to the docs for more info, but there is a section which states:

In CSF, stories and component metadata are defined as ES Modules. Every component story file consists of a required default export and one or more named exports.

[emanuelepane]

Hey @yannbf,

Now I get it :) Thank you so much for taking the time to write this super clear explanation!

I believe this can be closed!

[shilman]

Crikey!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-alpha.32 containing PR #10357 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

[emanuelepane]

@shilman @yannbf you guys are the best. Thanks!