Webpack5: Addons throw error on start

[Niznikr]

Describe the bug
After updating to use the webpack5 builder with Storybook 6.2.0-beta.1 running storybook-start builds successfully but after opening the tab, there is a loading spinner with error.

Uncaught (in promise) RangeError: Maximum call stack size exceeded
    at Object.exports.deprecate (vendors-node_modules_storybook_addon-a11y_dist_esm_register_js-node_modules_storybook_addon-a-4deea9.b4c677ad3a67aca938fd.bundle.js:126199)

Seems to also happen from the other addons when I start disabling some.

To Reproduce
Steps to reproduce the behavior:

1. Use Webpack5 builder (followed this example repo)
2. Run storybook-start
3. Notice error in the console

Expected behavior
Addons work as expected.

Screenshots
If applicable, add screenshots to help explain your problem.

Code snippets
If applicable, add code samples to help explain your problem.

System

Environment Info:

  System:
    OS: macOS 10.15.7
    CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
  Binaries:
    Node: 14.15.1 - ~/.nvm/versions/node/v14.15.1/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.11 - ~/.nvm/versions/node/v14.15.1/bin/npm
  Browsers:
    Chrome: 89.0.4389.82
    Edge: 88.0.705.63
    Firefox: 86.0
    Safari: 14.0.3
  npmPackages:
    @storybook/addon-a11y: ^6.2.0-beta.1 => 6.2.0-beta.1 
    @storybook/addon-actions: ^6.2.0-beta.1 => 6.2.0-beta.1 
    @storybook/addon-controls: ^6.2.0-beta.1 => 6.2.0-beta.1 
    @storybook/addon-docs: ^6.2.0-beta.1 => 6.2.0-beta.1 
    @storybook/addon-postcss: ^2.0.0 => 2.0.0 
    @storybook/addon-storysource: ^6.2.0-beta.1 => 6.2.0-beta.1 
    @storybook/addon-viewport: ^6.2.0-beta.1 => 6.2.0-beta.1 
    @storybook/addons: ^6.2.0-beta.1 => 6.2.0-beta.1 
    @storybook/builder-webpack5: 6.2.0-beta.1 => 6.2.0-beta.1 
    @storybook/react: ^6.2.0-beta.1 => 6.2.0-beta.1 
    @storybook/source-loader: ^6.2.0-beta.1 => 6.2.0-beta.1 
    @storybook/theming: ^6.2.0-beta.1 => 6.2.0-beta.1 
    @storybook/web-components: ^6.2.0-beta.1 => 6.2.0-beta.1 

Additional context
Add any other context about the problem here.

┆Issue is synchronized with this Asana task by Unito

[shilman]

@Niznikr not seeing this when I clone the sample repo and add addon-a11y@next. do you a repro repo you can share?

[Niznikr]

I do not (private repo). I can share the main.js we use if that's helpful:

module.exports = {
  addons: [
    {
      name: '@storybook/addon-docs',
      options: {
        sourceLoaderOptions: {
          parser: 'typescript',
          injectStoryParameters: false,
        },
        transcludeMarkdown: true,
      },
    },
    '@storybook/addon-actions',
    '@storybook/addon-a11y',
    '@storybook/addon-viewport',
    '@storybook/addon-controls',
    {
      name: '@storybook/addon-postcss',
      options: {
        postcssLoaderOptions: {
          implementation: require('postcss'),
        },
      },
    },
    '@storybook/addon-storysource',
  ],
  stories: [],
};

[Niznikr]

@shilman Found the culprit. We have a docs only story named intro.docs.stories.mdx which simply contains this bit to render our README md file using transcludeMarkdown: true from @storybook/addon-docs:

import Intro from '../README.md';

<Intro />

If I tell Storybook to ignore this file, everything runs fine with Webpack@5 builder. Guessing a regression from 4 -> 5 regarding importing md files with transcludeMarkdown in addon-docs?

[shilman]

HMMMM interesting. Thanks for tracking this down! I'll dig a little bit and see if I can reproduce. Much appreciated 🙏

[Niznikr]

You bet!

[Niznikr]

@shilman Actually confirmed it's not that. I previously excluded it from the snippet above because I thought it was irrelevant but removed this bit and the doc rendered fine. In that same mdx file we have:

import DS_TITLE from '../../../.storybook/dsTitle';

<Meta title={`${DS_TITLE}/Intro`} />

Where dsTitle.js contains:

import pkg from '../packages/core/package.json';

const DS_TITLE = `Design System ${pkg.version}`;

export default DS_TITLE;

I suspect the line import pkg from '../packages/core/package.json' is causing the issue

[Niznikr]

The line is in accordance with the Webpack 5 guidelines on JSON modules so not sure why it's causing an issue.

[shilman]

@Niznikr it might be that we have some weird JSON configuration in storybook core? cc @ndelangen

https://github.com/storybookjs/storybook/blob/next/lib/builder-webpack5/src/preview/iframe-webpack.config.ts#L194-L210

[Niznikr]

Perhaps? I can try without that entry and see if that helps.

[Niznikr]

@shilman Was able to verify that json imports are fine. The thing causing RangeError: Maximum call stack size exceeded to get thrown is having periods within the Meta title. In my case it was showing the package.json version in the title. Curious how using Webpack 5 is impacting what can be included in titles?

[shilman]

@Niznikr Aha, so the generated string was something like My Design System 0.5.3/Intro, and it's 0.5.3 that's causing the problem?

[Niznikr]

Yup!

[Niznikr]

Any recommendations? Until we get composition going, this has been a helpful way to inform folks the version of the DS being reflected in the deployed SB instance.

[ndelangen]

I recommend using babel-preval like so:
https://github.com/storybookjs/storybook/blob/8b9bf5ea3003be7e03291b27926441075b00e10d/lib/api/src/version.ts#L0-L1

@shilman You seem to have overwritten this file, presumably because you have some local script that re-writes this file when updating version?

[shilman]

@ndelangen that's probably part of the release script. i guess i should fix that?!

[ndelangen]

Yeah, I used preval so you wouldn't have to do this.

[Niznikr]

Still get the same error when using the babel-preval method

[Niznikr]

@shilman Not sure what changed (perhaps the ESM file-loader fix?) but upgrading from 6.2.0-rc.3 to 6.2.3 seems to fix things and this snippet now works as expected:

import pkg from '../packages/core/package.json';

const DS_TITLE = `Design System ${pkg.version}`;

export default DS_TITLE;

[shilman]

Awesome. I bet that was it! Closing this for now.