Possible bug in @storybook/addon-essentials version 8?

[azangru]

I wanted to report something very puzzling, which could be a bug, or it could be just me.

When I updated Storybook from v7 to v8, one of my stories stopped working, while the other stories were working fine. The error message complained that one of my components was not defined:

AccordionItemButtonWrapper is not defined
ReferenceError: AccordionItemButtonWrapper is not defined
    at ./src/shared/components/accordion/index.tsx (http://localhost:9001/shared-components-accordion-Accordion-stories.iframe.bundle.js:1481:1)
    at __webpack_require__ (http://localhost:9001/runtime~main.iframe.bundle.js:28:33)
    at fn (http://localhost:9001/runtime~main.iframe.bundle.js:338:21)
    at ./stories/shared-components/accordion/Accordion.stories.tsx (http://localhost:9001/shared-components-accordion-Accordion-stories.iframe.bundle.js:18:89)
    at __webpack_require__ (http://localhost:9001/runtime~main.iframe.bundle.js:28:33)
    at fn (http://localhost:9001/runtime~main.iframe.bundle.js:338:21)
    at http://localhost:9001/main.iframe.bundle.js:2043:10
    at async StoryStore.importFn (http://localhost:9001/main.iframe.bundle.js:83:27)
    at async StoryStore.loadCSFFileByStoryId (http://localhost:9001/sb-preview/runtime.js:106:8539)
    at async StoryStore.loadStory (http://localhost:9001/sb-preview/runtime.js:106:9309)

When I checked the component that Storybook was complaining of, I confirmed that it existed and was exported properly. The only noteworthy thing about that component was that it a default export that was then re-exported through a barrel index.ts file.

Failing to find anything wrong with the component itself, I tried to tweak storybook config, which was as follows:

import webpackConfig from './webpack';

export default {
  stories: ['../stories/**/*.stories.tsx'],
  webpackFinal: config => webpackConfig(config),
  addons: ['@storybook/addon-essentials', '@storybook/addon-webpack5-compiler-babel'],
  framework: {
    name: '@storybook/react-webpack5',
    options: {}
  },
  core: {
    disableTelemetry: true
  }
};

I suspected there was something wrong with babel; but first, I tried disabling @storybook/addon-essentials. To my astonishment, after that change, the broken story started working correctly.

I do not know what to attribute this to. I cannot imagine why addon-essentials would break component import; but perhaps to some of you this might ring a bell?

Here's the output of storybook info:

Storybook Environment Info:

  System:
    OS: macOS 14.4
    CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node
    npm: 10.1.0 - ~/.nvm/versions/node/v20.9.0/bin/npm <----- active
  Browsers:
    Chrome: 122.0.6261.129
    Safari: 17.4
  npmPackages:
    @storybook/addon-essentials: 8.0.2 => 8.0.2 
    @storybook/addon-webpack5-compiler-babel: 3.0.3 => 3.0.3 
    @storybook/manager-api: 8.0.2 => 8.0.2 
    @storybook/react: 8.0.2 => 8.0.2 
    @storybook/react-webpack5: 8.0.2 => 8.0.2 
    @storybook/theming: 8.0.2 => 8.0.2 
    storybook: 8.0.2 => 8.0.2 

[valentinpalkovic]

Hi @azangru

Thank you for sharing your issue!

I have a guess what the root cause might be, and I would like to ask you to try something out:

Could you please reenable @storybook/addon-essentials and opt-out for react-docgen-typescript?
In Storybook 8, we changed the default component analysis tool from react-docgen-typescript to react-docgen. We got a lot of reports that, in some edge cases, the analysis tool doesn't extract component information properly and even leads to breaking stories.

You can read about this in the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#react-docgen-component-analysis-by-default

I want to try out, whether the error disappears if you use the former default react-docgen-typescript. For that, go to your .storybook/main.js|ts file and configure the following:

export default {
+  typescript: {
+    reactDocgen: "react-docgen-typescript",
+  },
};

Please let me know whether this has helped!

[azangru]

@valentinpalkovic Yep, that was it, you are totally right! I'm getting a broken import with default typescript settings in the config, and a working import if I add typescript: { reactDocgen: "react-docgen-typescript" } to the config. Wow! 🤯