@storybook/addon-docs: Yet another "No code available"

[rwieruch]

• Storybook with "No code available"
• Project on GitHub

I am not sure when this happened, but for @storybook/addon-docs I get "No code available". It worked some time ago though.

Version: 6.1.21

main.js:

module.exports = {
  stories: ['./stories/**/*.@(js|mdx)'],
  addons: ['@storybook/addon-docs', '@storybook/addon-storysource'],
};

(I tried removing @storybook/addon-storysource, as suggested over here, but without success.)

┆Issue is synchronized with this Asana task by Unito

[pravbeseda]

I have the same problem (angular 11)

1. ng new test-app
2. cd test-app
3. npx -p @storybook/cli sb init
4. npm run storybook

On Docs tab of predefined Stories I see "No code available". The "Show code" button is unlocked after clicking on "Reset controls" or after some switching between Stories.

The problem is reproducible on versions 6.2.1-6.2.3.

Please help!

[shilman]

@rwieruch was this ever working for this repo? There's a duplicate issue which I'm unable to find right now, which is that addon-docs sets up the source-loader to run on \.(stories|story).[tj]sx?$, which your stories don't match:

https://github.com/storybookjs/storybook/blob/next/addons/docs/src/frameworks/common/preset.ts#L54-L63

Ideally it would simply use the .storybook/main.js stories glob, but that's not the case right now.

[pravbeseda]

@shilman Should I create a separate issue? The malfunction in the reference example looks like a bug.

[shilman]

@pravbeseda that bug already exists here i think #14193

[rwieruch]

@rwieruch was this ever working for this repo? There's a duplicate issue which I'm unable to find right now, which is that addon-docs sets up the source-loader to run on \.(stories|story).[tj]sx?$, which your stories don't match:

https://github.com/storybookjs/storybook/blob/next/addons/docs/src/frameworks/common/preset.ts#L54-L63

Ideally it would simply use the .storybook/main.js stories glob, but that's not the case right now.

Yes, it could be that I changed something in the in my last commits that caused this issue, but I have a hard time narrowing it down. So you are saying that I need to name my stories in a specific way to make it work again? I can look into this!

[shilman]

@rwieruch this constraint has been there since v5.3, which is that in order for source-loader to be auto-registered by addon-docs you must name your stories files *.(story|stories).[tj]sx?.

[rwieruch]

Confirmation: Story needs to be named *.story or *.stories. Thanks @shilman 👍🏽

[jmtt89]

using Angular 13.2.5 and Storybook 6.4.19 still not work, my files calling "right" way

All stories load correctly but in docs tab show "No code available" when click on some control or "reset control" the code show correctly.

maybe is because my project structure?

my-proj
|  src
|  .storybook
|  |  main.js
|  stories
|  |  feature-a
|  |  |  feature-a.stories.tsx
|  |  feature-b
|  |  |  feature-b.stories.tsx

my .storybook/main.js file

module.exports = {
  "stories": [
    "../stories/**/*.stories.mdx",
    "../**/*.stories.@(js|jsx|ts|tsx)",
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "storybook-addon-designs",
  ],
  "framework": "@storybook/angular",
  "core": {
    "builder": "webpack5"
  }
}

[sir-captainmorgan21]

@shilman should we open a separate issue? I am seeing this similar to @jmtt89 above