Storybook: addon-a11y in config crashes with non-existent addons channel

Created on 19 Mar 2019 · 11Comments · Source: storybookjs/storybook

Describe the bug
I'm trying to setup addon-a11y, however it crashes if I use the addDecorator in my config.js

Eg:

import { withA11y } from '@storybook/addon-a11y';
import { withKnobs } from '@storybook/addon-knobs';
import { addDecorator, configure } from '@storybook/react';
import React from 'react';

const req = require.context('../src', true, /\.story\.tsx$/);

function loadStories() {
  req.keys().forEach(filename => req(filename));
}


addDecorator(withKnobs);
addDecorator(withA11y);

configure(loadStories, module);

Which crashes with:

bootstrap:781 Uncaught Error: Accessing non-existent addons channel, see https://storybook.js.org/basics/faq/#why-is-there-no-addons-channel
    at AddonStore.getChannel (index.js:30)
    at Object.<anonymous> (index.js:46)
    at Object.../../node_modules/@storybook/addon-a11y/dist/index.js

Seems to me that the channel is not ready yet here.

However if I move the addDecorator(withA11y); to any story for example to a SampleComponent.story.tsx everything works as expected. However I really want to configure it in my config.js.

What am I doing wrong?

To Reproduce
Use addDecorator(withA11y) in config.js

Expected behavior
To not crash

System:

OS: MacOS
Device: Macbook Pro 2016
Browser: Chrome
Framework: React
Addons: a11y
Version: 5.0.3

a11y has workaround question / support

Source

donifer

👍7

Most helpful comment

I'm having the same issue. Seems to be an issue with the order of imports 🤔

This doesn't work for me:

import { withA11y } from '@storybook/addon-a11y';
import { addDecorator, configure } from '@storybook/react';

However, this works:

import { addDecorator, configure } from '@storybook/react';
import { withA11y } from '@storybook/addon-a11y';

I'm able to reproduce it with examples/official-storybook. Not sure if this is the expected behavior.

deini on 25 Mar 2019

👍3 😕1

All 11 comments

For now, I found a workaround. Just export a function that returns a story with the addDecorator and use that function in your storybook's files.

I'm in Vue and TypeScript but it should works fine in javascript if you remove the typings.

export function storiesOfComponent(storyName: string, module: NodeModule): Story {
    const story: Story = storiesOf(storyName, module);
    story.addDecorator(withA11y as any);

    return story;
}

vidal7 on 25 Mar 2019

We're using withA11y globally in examples/official-storybook inside the repo. Not sure what the difference is, but maybe you can look at that example to see if you can find any differences.

shilman on 25 Mar 2019

I'm having the same issue. Seems to be an issue with the order of imports 🤔

This doesn't work for me:

import { withA11y } from '@storybook/addon-a11y';
import { addDecorator, configure } from '@storybook/react';

However, this works:

import { addDecorator, configure } from '@storybook/react';
import { withA11y } from '@storybook/addon-a11y';

I'm able to reproduce it with examples/official-storybook. Not sure if this is the expected behavior.

deini on 25 Mar 2019

👍3 😕1

That's pretty weird. Anybody of my a11y peeps wanna track this down? @CodeByAlex @jsomsanith @Armanio

shilman on 26 Mar 2019

Quick investigation only :

import of addDecorator from @storybook/react executes app/react/src/client/preview/index.js that calls @storybook/core/client > start() that sets the channel. That's why it works when it is imported before a11y.
import of anything from @storybook/addon-a11y executes a addons.getChannel() that has not been set yet. It is used to set a listener to execute an aXe run on EVENTS.REQUEST.

Quick fix is what is suggested by @deini, but yes, need to find a way to register the listener once the channel is available.