Storybook does not load on browser: Accessing non-existent addons channel error

[yoanne2x]

Describe the bug
created a storybook using vite builder on react app.

To Reproduce

npm init @vitejs/app test-app

cd test-app

npm i

npx sb init --builder storybook-builder-vite
#(say yes to upgrade to builder-vite)

#create ./storybook/main-preview.html with
<script>
    window.global = window;
</script>

npm run storybook

# open browser at http://localhost:6006
# loading icon displayed, nothing after
# console errors (see additional content)

System
Environment Info:

System:
OS: macOS 12.3
CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
Binaries:
Node: 14.19.1 - ~/.nvm/versions/node/v14.19.1/bin/node
Yarn: 1.22.10 - /usr/local/bin/yarn
npm: 6.14.16 - ~/.nvm/versions/node/v14.19.1/bin/npm
Browsers:
Chrome: 100.0.4896.60
Safari: 15.4
npmPackages:
@storybook/addon-actions: ^6.4.20 => 6.4.20
@storybook/addon-essentials: ^6.4.20 => 6.4.20
@storybook/addon-interactions: ^6.4.20 => 6.4.20
@storybook/addon-links: ^6.4.20 => 6.4.20
@storybook/builder-vite: ^0.1.22 => 0.1.22
@storybook/react: ^6.4.20 => 6.4.20
@storybook/testing-library: 0.0.9 => 0.0.9

Additional context
client.ts:16 [vite] connecting...
client.ts:53 [vite] connected.
index.js:49 Error: Accessing non-existent addons channel, see https://storybook.js.org/basics/faq/#why-is-there-no-addons-channel
at AddonStore2.getChannel (index.js:30:13)
at new Instrumenter (instrumenter.js?v=a5fb0150:174:27)
at instrument (instrumenter.js?v=a5fb0150:852:69)
at argsEnhancers.js:29:19
warn @ index.js:49
(anonymous) @ index.js:76
instrument @ instrumenter.js?v=a5fb0150:859
(anonymous) @ argsEnhancers.js:29
index.js:30 Uncaught Error: Accessing non-existent addons channel, see https://storybook.js.org/basics/faq/#why-is-there-no-addons-channel
at AddonStore2.getChannel (index.js:30:13)
at argsEnhancers.js:36:22
AddonStore2.getChannel @ index.js:30
(anonymous) @ argsEnhancers.js:36
iframe.html?id=*&viewMode=story:54 POST http://localhost:6006/runtime-error 404 (Not Found)

[jambsik]

I have the same problem with 6.4.20, if I use 6.4.19 and I don't upgrade everything works correctly for me. In my case It seems the problem is with the addon: @storybook/addon-a11y , when I don't use it everything works fine for 6.4.20

[yoanne2x]

Yes same, 6.4.19 works... thing is, I can't seem to call sb init with a specific version... how do we install a specific version of storybook?

[shilman]

@yoanne2x you need to edit your package.json file and change the version specifiers to remove the ^ at the beginning, then reinstall:

For example:

    "@storybook/addon-actions": "6.4.19",
    "@storybook/addon-essentials": "6.4.19",
    "@storybook/addon-interactions": "6.4.19",

However, I am able to replicate this bug even in v6.4.19. Will check it out with @IanVS and @joshwooding and hopefully we can come up with a fix quickly.

[shilman]

As a temporary workaround, I am able to solve this by removing "@storybook/addon-interactions" from the addons field in .storybook/main.js

[jambsik]

@shilman the same thing happens with the addon '@storybook/addon-a11y' , in my case deleting that one worked

[shilman]

I also found that if I enable the on-demand store with features: { storyStoreV7: true }, it also solves the problem.

@IanVS @joshwooding I think what's going on is this line, which matches webpack:

https://github.com/storybookjs/builder-vite/blob/main/packages/builder-vite/codegen-modern-iframe-script.ts#L48-L49

Versus this file, which does not set up the channel at the very beginning:

https://github.com/storybookjs/builder-vite/blob/main/packages/builder-vite/codegen-iframe-script.ts

Here's the code that chooses one or the other:

https://github.com/storybookjs/builder-vite/blob/main/packages/builder-vite/code-generator-plugin.ts#L69-L73

I suspect adding the addons.setChannel at the beginning of the legacy iframe file will fix the problem. However, I also suspect that there is a better fix that maybe @tmeasday could advise on with updating the legacy behavior to be more like webpack's (using the facade, etc.).

[IanVS]

Thanks for the investigation and suggestion @shilman. I've put up a PR in the vite builder that I believe should address this, although I'm open to any other suggestions of a "better" fix as well.

[IanVS]

@yoanne2x @jambsik This has been fixed in @storybook/[email protected]. Please try it out and let us know whether it does the trick. Thanks for filing the report!

[tmeasday]

I guess I am late to this party, and I am a little confused about what the vite builder does exactly in the v6 case, but here is where the relevant code is for webpack (in the start function):

storybook/lib/core-client/src/preview/start.ts

Lines 55 to 59 in 894fd20

	const channel = createChannel({ page: 'preview' });
	addons.setChannel(channel);
	const clientApi = new ClientApi<TFramework>();
	const preview = new PreviewWeb<TFramework>();

Does the vite builder end up calling start()? If not where does the preview get created in v6 mode?

[IanVS]

@tmeasday we call the framework configure() function here: https://github.com/storybookjs/builder-vite/blob/0ae59846fd082828312e5cebc8b9c95b99d5d2c4/packages/builder-vite/codegen-entries.ts#L35, and our start is here: https://github.com/storybookjs/builder-vite/blob/0ae59846fd082828312e5cebc8b9c95b99d5d2c4/packages/builder-vite/index.ts#L40

[tmeasday]

Whoops, no different start! I mean the one that the framework ends up calling (actually the function that provides configure):

storybook/app/react/src/client/preview/index.tsx

Line 20 in 5982475

const api = start(renderToDOM, { render });

storybook/app/react/src/client/preview/index.tsx

Line 28 in 5982475

export const configure: ClientApi['configure'] = (...args) => api.configure(framework, ...args);

So, with that in mind, if you are calling into that file (import from '@storybook/react' etc), then you shouldn't need to set the channel as the start() function should do it itself.

[tmeasday]

It might have just been an order thing. In the webpack builder, we do:

1. Ensure that @storybook/react has been initialized:

   storybook/lib/builder-webpack5/src/preview/iframe-webpack.config.ts

   Line 112 in c78307e

   path.join(workingDir, 'storybook-init-framework-entry.js')

2. Then do the preview entries piece (addons and preview.js):

   storybook/lib/builder-webpack5/src/preview/iframe-webpack.config.ts

   Line 134 in c78307e

   entries.push(`${configFilename}-generated-config-entry.js`);

3. Then add an entry for main:stories.

So the issue you were having might have been from not having an explicit step 1 here.

[IanVS]

So, there's the conundrum @tmeasday. If we import the framework at the start of the process (like we used to) before the preview entries, then we ended up with #17773. I moved the call in storybookjs/builder-vite#289 to address that issue, and introduced this one.

[jambsik]

@shilman @IanVS Thank you very much! now it works correctly :)