Storybook: 'emit' of null Error with every Addon I try

[5revolutions]

1. Have a simple Create React App project to test Storybook and addons.
2. Removed and reinstalled latest npm modules.
3. Using all standard documented Storybook instructions.
4. Searched in issues about this error and see references to old, mismatched versions etc, but none seem to apply to this instance?

Every addon I try I get errors, usually: Cannot read property 'emit' of null

Could very well be that I'm missing something simple? Thanks!

Packages:

  "dependencies": {
    "bootstrap": "^4.0.0-alpha.6",
    "intro.js-react": "^0.1.3",
    "react": "^15.6.1",
    "react-addons-css-transition-group": "^15.6.0",
    "react-addons-transition-group": "^15.6.0",
    "react-dom": "^15.6.1",
    "react-scripts": "1.0.10",
    "reactstrap": "^4.8.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },
  "devDependencies": {
    "@storybook/addon-notes": "^3.2.0",
    "@storybook/react": "^3.2.3"
  }

Storybook Addon Config:

/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */

// import '@storybook/addon-actions/register';
// import '@storybook/addon-links/register';
// import '@storybook/addon-knobs/register';
import '@storybook/addon-notes/register';

Test Storybook index.js:

import React from 'react';
import { storiesOf } from '@storybook/react';
import { WithNotes } from '@storybook/addon-notes';

import Table from '../components/Table/Table.js';

storiesOf('Table', module)
  .add('with some notes', () => (
    <WithNotes notes={'Doesn&apos;t it look nice?'}>
      <Table />
    </WithNotes>
  ));

Full Error:

Cannot read property 'emit' of null
TypeError: Cannot read property 'emit' of null
    at WithNotes.render (http://localhost:6006/static/preview.bundle.js:47070:14)
    at http://localhost:6006/static/preview.bundle.js:31528:21
    at measureLifeCyclePerf (http://localhost:6006/static/preview.bundle.js:30808:12)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (http://localhost:6006/static/preview.bundle.js:31527:25)
    at ReactCompositeComponentWrapper._renderValidatedComponent (http://localhost:6006/static/preview.bundle.js:31554:32)
    at ReactCompositeComponentWrapper.performInitialMount (http://localhost:6006/static/preview.bundle.js:31094:30)
    at ReactCompositeComponentWrapper.mountComponent (http://localhost:6006/static/preview.bundle.js:30990:21)
    at Object.mountComponent (http://localhost:6006/static/preview.bundle.js:3760:35)
    at ReactCompositeComponentWrapper.performInitialMount (http://localhost:6006/static/preview.bundle.js:31103:34)
    at ReactCompositeComponentWrapper.mountComponent (http://localhost:6006/static/preview.bundle.js:30990:21)

[ndelangen]

Try this new syntax:

import { storiesOf } from '@storybook/react';
import { withNotes } from '@storybook/addon-notes';

import Component from './Component';

storiesOf('Component', module)
  .add('with some emoji', withNotes('A very simple component')(() => <Component></Component>));

[5revolutions]

Thanks for the reply. Regrettably I still get an "Cannot read property 'emit' of null" error.

[stuff]

got the same error with addon-actions

[ndelangen]

Does any of you have a codebase with this problem I can take a look at?

[5revolutions]

OK, so with a fresh project install, I see where it breaks down. Perhaps a dumb, non-Storybook environment issue on my end that I'm too dumb to understand? Step 4 below is where it goes wrong for me:

1. I created a fresh Create React App project.
2. I created a fresh Storybook install.
3. The default-configured Storybook actions and link addons work fine.
4. But when I attempt to add addons per instructions...

npm i -D @storybook/addon-info or npm install @storybook/addon-knobs --save-dev

...I get a warning that...

npm WARN gentlyRm not removing /path/to/project/node_modules/.bin/webpack as it wasn't installed by /path/to/project/node_modules/webpack
... [and a handful of other resources: esparse, esvalidate etc]

... and then when I yarn run storybookI get sh: start-storybook: command not found which requires that I getstorybook -f -- and then new addons do work. But of course, something is broken in this process.

[rkichenama]

I am not sure why, but when I npm i -D react-inspector everything got fixed.

[dfagan2]

I'm struggling through this as part of the upgrade to v3.2 (things were working fine before that). Getting this "emit" error among others that seem related, when trying to re-introduce the Knobs addon. All seem to stem from the a null channel

With:

"@storybook/addon-knobs": "^3.2.0",
"@storybook/addons": "^3.2.0",
"@storybook/react": "^3.2.3",

The addon is registered and imported, and I'm using the established syntax of .addDecorator(withKnobs)

I'm getting:

Warning: Failed prop type: The prop `channel` is marked as required in `WrapStory`, but its value is `null`.
    in WrapStory

render.js:69 TypeError: Cannot read property 'removeListener' of null
    at WrapStory.componentWillUnmount (WrapStory.js:76)
    at ReactCompositeComponent.js:408
    at measureLifeCyclePerf (ReactCompositeComponent.js:75)
    at ReactCompositeComponentWrapper.unmountComponent (ReactCompositeComponent.js:407)
    at Object.unmountComponent (ReactReconciler.js:78)
    at Object.unmountChildren (ReactChildReconciler.js:146)
    at ReactDOMComponent.unmountChildren (ReactMultiChild.js:371)
    at ReactDOMComponent.unmountComponent (ReactDOMComponent.js:990)
    at Object.unmountComponent (ReactReconciler.js:78)
    at Object.unmountChildren (ReactChildReconciler.js:146)

KnobManager.js:87 Uncaught TypeError: Cannot read property 'emit' of null
    at KnobManager.js:87

Have trashed my node_modules directory and reinstalled, per the suggestion of https://github.com/storybooks/storybook/issues/1370 but without any luck

[shilman]

@dfagan2 do you have a public repo I could look at?

[dfagan2]

Unfortunately no, the client I'm working for has put me up in a private repo. Is there additional context or snippets I can provide?

[shilman]

@dfagan2 do you have any yarn/npm lockfiles around? if so, try nuking those too.

[dfagan2]

Aha! that was it, had a lingering package-lock.json. Deleting that and re-running npm install appears to have cleared it up.

Thanks for the tip!