Storybook: Custom addon not included in bundle after running build-storybook

[mordoom]

Bug or support request summary

My custom addon is not being included in the JS bundle after running build-storybook -c .storybook. No errors are thrown when running build-storybook. However, I am seeing the addon on the page and in the Javascript when I run start-storybook.

The result of this is that my custom addon is not displayed in my static storybook build.

Steps to reproduce

I am using typescript in the project and have a custom webpack config for storybook.

module.exports = ({ config }) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    loader: require.resolve("babel-loader"),
    options: {
      presets: [["react-app", { flow: false, typescript: true }]]
    }
  });
  config.resolve.extensions.push(".ts", ".tsx");
  return config;
};

I'm using a babel.config.js and Babel 7

module.exports = {
  presets: [
    [
      '@babel/env',
      {
        targets: {
          node: '8.9'
        }
      }
    ],
    '@babel/typescript'
  ]
};

My addon.js file is located in the .storybook directory and contains:

import '@storybook/addon-knobs/register';
import './json-addon/register';

I am able to attach the register.js if required. It is working locally for me if I run start-storybook.

This is how I'm registering the addon in register.js

addons.register(ADDON_ID, api => {
  const title = "JSON Content";
  const render = ({ active }) => (
    <JsonPanel
      key={1}
      api={api}
      channel={addons.getChannel()}
      active={active}
    />
  );
  addons.add(PANEL_ID, { type: types.PANEL, title, render });
});

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

• "@babel/core": "7.1.2",
• "@storybook/addon-actions": "^5.0.6",
• "@storybook/addon-info": "^5.0.6",
• "@storybook/addon-knobs": "^5.0.6",
• "@storybook/addon-links": "^5.0.6",
• "@storybook/addons": "^5.0.6",
• "@storybook/cli": "^5.0.6",
• "@storybook/components": "^5.0.6",
• "@storybook/react": "^5.0.6",
• "@storybook/theming": "^5.0.6",

Affected platforms

Running on macOS Mojave

Where to start

I followed the docs on these pages for my configuration:
https://storybook.js.org/docs/configurations/typescript-config/
https://storybook.js.org/docs/addons/writing-addons/

Acceptance criteria

Successful build-storybook run where the JS bundle contains the addon code so it can be deployed as static files

[shilman]

You're also using addon-knobs. Is that bundling properly?

[mordoom]

Yes knobs is bundling correctly. When I load up the static storybook built with build-storybook I see the knobs and they are functioning correctly. However the custom addon is missing. I tried commenting out knobs in the addons.js file and building and then knobs disappeared.
So my theory is that it's using addons.js but maybe silently failing when importing the custom addon's register.js?

[shilman]

@Cheebang that's a good theory. I think there have been some issues about webpack errors getting swallowed ... so this could be related to that? Just did a quick search but couldn't find the issue ☹️

[mordoom]

OK I have an update: I removed the import to the custom addon and just pasted the contents of register.js into addons.js and it has appeared in the bundle :)
So it would seem it is the import './json-addon/register'; that is silently failing.

The manager js bundle that includes all addons is built using a separate webpack config 🤔
build-storybook --debug-webpack was helpful to see the separate webpack configs

[shilman]

@Cheebang Out of curiosity I did static builds with two separate projects (1 react, 1 vue) that use custom addons and didn't have problems with either. Both were running next code (5.1.x which should be quite similar to 5.0.x) and neither were typescript. FYI.

[mordoom]

Thanks that is good to know. What was the structure of the project? I'm curious to see where the register.js of the custom addon was sitting

[shilman]

Register.js was just in my .storybook folder

[Kadrei]

Having the same issue with a local plugin in a subfolder of the .storybook-folder not showing up when I execute build-storybook - start-storybook works fine.

Having the addons.register-call directly in the addons.js-file works (even though I still import Components from the Subfolder)

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[shilman]

From one of our community members on Discord:

I had the same issue [...] but managed to resolve it. Found out that it as due to webpack treeshaking my code away. I just had to add a sideEffect reference pointing to my custom addon and then it worked.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[StJohn3D]

This issue is definitely still happening in version 5.2.6.

Storybook React

My addon at
.storybook/addons/register.js is being stripped from the static build.

[StJohn3D]

I had "sideEffects": false in my package jason because I'm writing a component library.
Changing it to

"sideEffects": [
    ".storybook/addons/my-addon/register.js"
  ],

Fixed the issue

[maraisr]

Solved by putting your addon in a main.js that exports an actions array. So remove the actions.js file.