Storybook: Still getting "accessing nonexistent addons channel"

[jcreamer898]

Even after bumping all my addons to the new version I'm still getting the non-existent addons error...

Something I found a bit interesting is how NPM installed things.

It's like @storybook/react has it's own version of addons?

[jcreamer898]

Ok, so the node_modules/@storybook/addons says it was imported by knobs...

And the one inside of the node_modules/@storybook/react says it was...

[jcreamer898]

BTW, I'm using npm 5.4.2.

[shilman]

@jcreamer898 can you try removing your lock file and node_modules and reinstalling?

[jcreamer898]

Ahhh, I had removed node_modules, but never package-lock. Thanks!

[TheRohitSharma]

What do we do if removing package lock or yarn lock is not an option?

[Hypnosphi]

You can do the following:

1. Remove all the @storybook dependencies
2. Run yarn or npm install to update lockfile
3. Install @storybook dependencies back

[dennisnilsson]

Hi @jcreamer898 ! Im glad that you found out how to solve your issue. I'm sitting with the exact same thing when trying to use the addon "knobs". Could you describe your solution in more details, please?

Did you just remove package-lock and then wrote npm install? Where did you find the package-lock file, I have 24 files with that name...

[Diokuz]

Very strange problem with versions mismatch. What the real problem behind this? Why addons cannot be written in a way where _patch_ (!!!) version doesn't matter?

[Hypnosphi]

@storybooks/team I think we really need to make @storybbok/addons a peer dependency everywhere except the apps. It's a shame that we make users remove their lockfiles

[tmeasday]

If that helps! I think sadly the way npm is designed it is very hard to avoid this problem :/ I think the best solution is probably to figure out a way where addons do not need to depend on the addon package (i.e the API is passed to them by the user rather than them importing it).

Perhaps a small improvement we could make is to make the addons package complain if it is installed more than once?

[Hypnosphi]

figure out a way where addons do not need to depend on the addon package (i.e the API is passed to them by the user rather than them importing it).

That's an idea worth considering for #1209

[TroySchmidt]

I am testing with 3.3.0.alpha.3 and getting the non-existent channels message. I am using TypeScript and there is no addons channel at all. This behavior now is consistent across CI, locally, run, and build output.

function action(name) {
  // eslint-disable-next-line no-unused-vars, func-names
  var handler = function handler() {
    for (var _len = arguments.length, _args = Array(_len), _key = 0; _key < _len; _key++) {
      _args[_key] = arguments[_key];
    }

    var args = (0, _from2.default)(_args).map(function (arg) {
      return (0, _stringify2.default)((0, _util.decycle)(arg));
    });
    var channel = _addons2.default.getChannel();
    var id = (0, _v2.default)();
    channel.emit(_.EVENT_ID, {
      id: id,
      data: { name: name, args: args }
    });
  };

If I debug in Chrome while running the line var channel = _addons2.default then channel is null on that object. So something is screwy.

[ndelangen]

@TroySchmidt First of all, thank you so much for giving the 3.3 alpha a go! 🙇
It means a lot!

Second: sorry to hear it's not been a happy road, we will fix the problem!

[ndelangen]

https://github.com/storybooks/storybook/issues/269#issuecomment-346184773

[mjswensen]

It's also worth noting that you will also get this error if you haven't yet registered your addon. Maybe that's super obvious to others, but it tripped me up for a while. 😊

[lewistaylor]

We have a setup using react-native that looks like this:

index.js

import Config from 'react-native-config';

import StorybookUI from './storybook';

import App from './App';

if (Config.RUN_STORYBOOK === '1') {
  module.exports = StorybookUI;
} else {
  module.exports = App;
}

We have no addons in the addons.js file, and every time we make a change running our app normally (so that hotreloading occurs), i.e. Config.RUN_STORYBOOK === '0', we get Accessing non existent addons channel.

We've managed to get around this by doing:

if (Config.RUN_STORYBOOK === '1') {
  configure(() => {
    require('./components/stories'); // eslint-disable-line global-require
  }, module);
  StorybookUIRoot = getStorybookUI({ port: 7007, onDeviceUI: true });
} else {
  StorybookUIRoot = <View />;
}

So that the storyboard import does not cause this issue. Is there a better way of initialising storybook so that importing it doesn't have the above effect?

I realise this issue is closed but it does seem related

[elektronik2k5]

In case anyone still experiences this with the latest current version, 3.3.10, I managed to solve it by upgrading to 3.4.0-alpha.5. :confused:

[CoffiDev]

npm version : 5.2.0

node version: 6.9.1

Hi, I'm experimenting this error.

I have already read about this issue.

I have already remove "node_modules package-lock.json"

I tried using version 3.3.14 but it didn't work, so I tried using the last last version: 3.4.0-alpha.9

"@storybook/addon-actions": "^v3.4.0-alpha.9",

"@storybook/addon-notes": "^v3.4.0-alpha.9",

"@storybook/addons": "^v3.4.0-alpha.9",

"@storybook/channels": "^v3.4.0-alpha.9",

"@storybook/vue": "^v3.4.0-alpha.9",

I have also manual check my package-lock.json and didn't find diferent versions of "storybook/addons"

I'm experiencing this issue when running "jest"

[elektronik2k5]

@CoffiDev, I've since successfully updated to 3.4.0-alpha.8. npm 5.5.2, node 8.9.2. I'm using @storybook/react though.

[HazemEngMuh]

I cannot solve this error "accessing nonexistent addons channel"

     "@storybook/addon-actions":` "3.3.11",
     "@storybook/addons": "3.3.11",
     "@storybook/react": "3.3.11",
     "react-beautiful-dnd": "4.0.1",
     "styled-components": "3.0.2"

Does any one have stable version ??

[igor-dv]

"storybook": "1.0.0",

what is this ?

[HazemEngMuh]

when i try to solve it I added it now I removed it but not works

[igor-dv]

Do you have a lock file?

[HazemEngMuh]

yes I have. When I make any change I delete it and make npm i from new

[igor-dv]

🤔 any public repo where we can reproduce the problem?

[HazemEngMuh]

Two minutes will be ready

[HazemEngMuh]

https://github.com/HazemEngMuh/ReactDNDExample

[igor-dv]

I don't see any storybook related code there

[HazemEngMuh]

https://github.com/HazemEngMuh/ReactDNDExample/blob/master/src/board/board.jsx
Third row

[igor-dv]

That's not how you should use addons and Storybook in particular.
Please refer to the documentation

[SEAPUNK]

Wait, so I'm confused: Has the addons as peerDependency issue been solved? We've been continuously been getting bitten by this issue, especially since we have a policy of pinning our dependencies (installed addons @ 3.3.14, but 3.3.15 exists, so yarn installs 3.3.14 to node_modules and 3.3.15 to storybooks/react/node_modules).

Looking in @storybooks/react, it's still listing it as a dependency -- if you expect the user to only have one copy, it should be a peerDependency where the user installs it on their side (a la react and react-dom).

[danielduan]

@SEAPUNK Your @storybook/react should be the only thing installing a copy of @storybook/addons.

You don't need to install addons yourself in your package.json. It might trigger a missing peer dependency warning, but you should be fine.

[Hypnosphi]

@storybooks/react, it's still listing it as a dependency

That's the thing we have to change in 4.0

[SEAPUNK]

@danielduan That's magical, relies wholly on the hoisting system, and I don't like it. I strongly believe it should be the other way around. I'll wait until 4.0, I guess.

And we do explicitly use the dependency in some of our code, e.g. registering a custom addon

[gvaldambrini]

I'm having this problem as well. In my case, I have my Storybook addon which depends (using peerDependencies and devDependencies) by @storybook/addons and @storybook/addon-actions. The addon is a package part of a lerna repository, and in the same repo I have an example package which uses the addon. The example package lists @storybook/addons and @storybook/addon-actions as dependencies. The packages lock down both the dependencies to the 3.3.15 version, however, if I run the examples using storybook and I perform any action which triggers the action addon, the problem arises.

To reproduce the problem, clone the repository, switch branch to split-packages, then after yarn install && yarn bootstrap run yarn storybook-react-examples and as soon as the page is loaded, click the Home link.
Any idea how to solve this? Thanks!

[SEAPUNK]

Try inspecting your dependency tree with yarn why to figure out if there are multiple addon packages installed:

yarn why @storybook/addons

[gvaldambrini]

The problem is that in my case it is correct (as far as I understand) that both the package and the example have @storybook/addons installed. I managed to workaround the problem using lerna hoisting so that they share the same instance of @storybook/addons, but of course it's a workaround and not the ideal solution.
I hope that in the next storybook version the issue will be fixed as reported by @Hypnosphi. Thanks anyway!

[Hypnosphi]

I think we should enforce channel being a singleton using some global variable like window.__STORYBOOK_CHANNEL instead of relying on a single package instance

[Hypnosphi]

Fix released as 4.0.0-alpha.2

[pebie]

For those who still get this issue in 3.4.x , I just figured out that I use babel module resolver.
My plugins config in .babelrc was :

...
"plugins": [
    ["module-resolver", {
      "root": ["src/app", ".storybook"],
    }]
  ]
...

Then I decided to move .storybook in a storybook env :

...
"env": {
    "storybook": {
      "plugins":[
          ["module-resolver",{
           "root": [".storybook"],
        }]
       ]
    },
  },
"plugins": [
    ["module-resolver", {
      "root": ["src/app"],
    }]
  ]
}
...

It's obvious but, just in case, verify if you don't load any storyboard files when you run your app

Hope this can help.

[g-verma]

if still you are facing the issue try this showAddonPanel: false, in config.js

[fahidnasir]

Fixed by Removing node_modules folder and re-installing the packages.