Addons depend on module state, deduplication required (Cannot read property 'removeListener' of null)

[Ezku]

Hello,

I was setting up storybook-addon-knobs for a project and had quite a bit of trouble getting it running. The communication channel setup was failing, breaking the decorated component that should have been rendered with the story with the following trace:

Cannot read property 'removeListener' of null
TypeError: Cannot read property 'removeListener' of null
    at WrapStory.componentWillUnmount (http://localhost:9001/static/preview.bundle.js:52084:26)
    at ReactCompositeComponentWrapper.unmountComponent (http://localhost:9001/static/preview.bundle.js:38889:15)
    at Object.unmountComponent (http://localhost:9001/static/preview.bundle.js:3250:23)
    at Object.unmountChildren (http://localhost:9001/static/preview.bundle.js:38332:26)
    at ReactDOMComponent.unmountChildren (http://localhost:9001/static/preview.bundle.js:43116:29)
    at ReactDOMComponent.unmountComponent (http://localhost:9001/static/preview.bundle.js:40482:11)
    at Object.unmountComponent (http://localhost:9001/static/preview.bundle.js:3250:23)
    at Object.unmountChildren (http://localhost:9001/static/preview.bundle.js:38332:26)
    at ReactDOMComponent.unmountChildren (http://localhost:9001/static/preview.bundle.js:43116:29)
    at ReactDOMComponent.unmountComponent (http://localhost:9001/static/preview.bundle.js:40482:11)

Tracing the problem and finding a solution, I found out the following:

• The immediate source of the error is this property call: https://github.com/kadirahq/storybook-addon-knobs/blob/master/dist/components/WrapStory.js#L65
• storybook-addon-knobs requires the channel in storybook-addons to be set https://github.com/kadirahq/storybook-addons/blob/master/dist/index.js#L17
• The channel is passed on to knob-decorated stories which will fail without it https://github.com/kadirahq/storybook-addon-knobs/blob/master/dist/KnobManager.js#L77
• The channel is set when initializing storybook https://github.com/kadirahq/react-storybook/blob/master/dist/client/preview/index.js#L71

After some debugging I confirmed that storybook and storybook-addon-knobs each received their own instance of storybook-addons. Thus, the former would set the channel on one instance and the latter would assume it to be there, only to run across a null.

Given this problem, the solution was to deduplicate storybook-addons. The simplest way to do that I found from webpack/webpack#1165, adding a resolution alias to webpack:

resolve: {
  alias: {
    '@kadira/storybook-addons': require.resolve('@kadira/storybook-addons')
  }
}

Is this expected behavior or a bug?

Thanks for the effort on this tool, it's been very helpful once I arrived at a functioning configuration.

---

Annex

My addons.js (copy paste from the documentation):

// Default storybook addons
import '@kadira/storybook/addons';

// Knobs
import '@kadira/storybook-addon-knobs/register';

The failing story:

/* @flow */

import React from 'react';

import { storiesOf } from '@kadira/storybook';
// $FlowFixMe
import { withKnobs, boolean } from '@kadira/storybook-addon-knobs';

storiesOf('Show', module)
  .addDecorator(withKnobs)
  .add('conditional rendering', () =>
    <div>
      <p>The following element is rendered conditionally:</p>
      <Show when={ !boolean('hide element', false) }>
        <p>Toggle the 'hide element' knob to hide.</p>
      </Show>
    </div>
  );

function Show(props: { when: boolean, children?: any }) {
  if (props.when) {
    return props.children;
  } else {
    return null;
  }
}

[thani-sh]

Hi @Ezku, thanks for reporting. We'll look into it ASAP.

[arunoda]

This is pretty weird since storybook-addons is a peer dependancy in all addons and it's a dependancy only in the @kadira/storybook.
Yep we can do that Webpack hack. But we assume we don't need to.

Anyway, are you using any linked NPM repos for storybook?

[roonyh]

@arunoda This does happen with npm version 2 because it installs two copies. Just checked. Do we need to support npm v2?

[arunoda]

Yep. It seems like we need that webpack alias in storybook.

Could you try using that?

[Ezku]

Thanks for your attention on the issue. I can confirm that I'm on npm 2.x, @roonyh.

[arunoda]

Published a new @kadira/storybook(v2.15.0) version with webapck require.alias as you mentioned.
Now it should work properly.

[arunoda]

I'm closing this now. But, feel free to reopen if needed.
And thanks a lot on pointing out the issue with a proper fix.