Custom addon not included in bundle after running build-storybook

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]

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.

[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