Storybook: Addon-docs: addEventListener in custom function parameters makes ReferenceError in the whole of stories

[yhatt]

Describe the bug
If addon-docs is enabled, addEventListener in custom function parameters makes ReferenceError in the whole of stories, and the story has not listed in the sidebar.

To Reproduce

1. Create Test.stories.jsx containing a story with a parameter that has included function to call addEventListener
2. Enable @storybook/addon-docs addon.
3. Run start-storybook.
4. See ReferenceError in the web console.

Expected behavior
The created error is listed to sidebar without any errors.

Screenshots

Code snippets

// Test.stories.jsx
export default {
  title: 'Test',
  component: () => null,
}

export const Story = () => null

Story.parameters = {
  foobar: () => {
    document.addEventListener('foo', () => console.log('bar'))
  },
}

System:
npx -p @storybook/cli@next sb info has got failed :(

$ npx -p @storybook/cli@next sb info

Environment Info:
(node:47235) UnhandledPromiseRejectionWarning: TypeError: (e || []).filter is not a function
    at /Users/yuki.hattori/.npm/_npx/46762/lib/node_modules/@storybook/cli/node_modules/envinfo/dist/envinfo.js:1:73314
    at async Promise.all (index 6)
(node:47235) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:47235) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Storybook modules using in my project are here:

"@storybook/addon-actions": "6.0.2",
"@storybook/addon-docs": "6.0.2",
"@storybook/addon-storyshots": "6.0.2",
"@storybook/addon-storyshots-puppeteer": "6.0.2",
"@storybook/addons": "6.0.2",
"@storybook/react": "6.0.2",

Additional context
My use case for using addEventListener in custom function parameter is to control rendered DOM by addon-storyshots-puppeteer. It had worked in v6.0.0-rc.15 but seems to have broken since v6.0.0-rc.16.

Strangely, this bug can reproduce when using addEventListener function through mocked object too.

const mock = { addEventListener: (_, __) => {} }

Story.parameters = {
  foobar: () => {
    mock.addEventListener('foo', () => console.log('bar'))
  },
}

It gets back by turning off addon-docs so I think that the root cause has contained in Docs addon.

[shilman]

do you have a repro repo?

[yhatt]

Prepared the minimal reproducible example in https://github.com/yhatt/storybook-bug. npm i and npm run storybook to run.

[shilman]

Thanks for the repro @yhatt -- fix is on the the way.

[shilman]

Whoopee!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.4 containing PR #11920 that references this issue. Upgrade today to try it out!

Closing this issue. Please re-open if you think there's still more to do.

[yhatt]

Confirmed working in v6.0.4! :tada: Thanks for your swift action.