storybook: Docs addon is not showing story code (No code available) unless you provide an unused variable into the function parameters
Describe the bug
The docs addon is showing the error No code available if you do not provide a variable into the story function, regardless if the variable is used or not.
To Reproduce
"@storybook/addon-a11y": "6.1.9",
"@storybook/addon-actions": "6.1.9",
"@storybook/addon-backgrounds": "6.1.9",
"@storybook/addon-controls": "^6.1.9",
"@storybook/addon-docs": "6.1.9",
"@storybook/addon-links": "6.1.9",
"@storybook/addon-storysource": "6.1.9",
"@storybook/addon-viewport": "6.1.9",
"@storybook/addons": "6.1.9",
"@storybook/preset-typescript": "^3.0.0",
"@storybook/vue": "6.1.9",
Expected behavior
Both stories, exampleOne and exampleTwo, should have the ability to view their story code form within the docs addon.
Screenshots
Note how the first one does not have code available, whereas the second one does. See the code snippet of the stories from this screenshot.

Code snippets
// .storybook/main.js
const path = require("path");
module.exports = {
stories: ['../src/components/**/*.stories.ts'],
addons: [
"@storybook/addon-actions",
"@storybook/addon-links",
"@storybook/preset-typescript",
"@storybook/addon-a11y/register",
"@storybook/addon-storysource",
"@storybook/addon-viewport",
"@storybook/addon-backgrounds/register",
"@storybook/addon-docs",
"@storybook/addon-controls",
],
webpackFinal: async (config, { configType }) => {
config.module.rules.push({
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader', {
loader: 'style-resources-loader',
options: {
patterns: [path.resolve(__dirname, '../src/styles/global.scss')]
}
}]
});
config.module.rules.push({
test: /\.(graphql|gql)?$/,
loader: 'graphql-tag/loader'
})
config.resolve.alias['@'] = path.resolve(__dirname, '../src')
return config;
},
};
// src/components/example.stories.ts
export const exampleOne: () => void = () =>
defineComponent({
template: `<div>Hello world - One</div>`,
});
export const exampleTwo: (args: { [key: string]: string | boolean }) => void = (args) =>
defineComponent({
template: `<div>Hello world - Two</div>`,
});
Additional context
This was not an issue with version 6.0.27.
About this issue
- Original URL
- State: open
- Created 4 years ago
- Reactions: 12
- Comments: 16 (4 by maintainers)
Commits related to this issue
- chore(docs): fix storysource for UncontrolledPopover Due to a storybook bug, we need to add args to the story parameters in order to show the source. (https://github.com/storybookjs/storybook/issues/... — committed to reactstrap/reactstrap by deleted user 3 years ago
- chore(docs): fix storysource for UncontrolledPopover Due to a storybook bug, we need to add args to the story parameters in order to show the source. (https://github.com/storybookjs/storybook/issues/... — committed to reactstrap/reactstrap by deleted user 3 years ago
- chore(docs): fix storysource for UncontrolledPopover Due to a storybook bug, we need to add args to the story parameters in order to show the source. (https://github.com/storybookjs/storybook/issues/... — committed to reactstrap/reactstrap by deleted user 3 years ago
- chore(docs): fix storysource for UncontrolledPopover Due to a storybook bug, we need to add args to the story parameters in order to show the source. (https://github.com/storybookjs/storybook/issues/... — committed to reactstrap/reactstrap by deleted user 3 years ago
- chore(docs): fix storysource for UncontrolledPopover Due to a storybook bug, we need to add args to the story parameters in order to show the source. (https://github.com/storybookjs/storybook/issues/... — committed to reactstrap/reactstrap by deleted user 3 years ago
- chore(docs): fix storysource for UncontrolledPopover Due to a storybook bug, we need to add args to the story parameters in order to show the source. (https://github.com/storybookjs/storybook/issues/... — committed to reactstrap/reactstrap by deleted user 3 years ago
- chore(docs): fix storysource for UncontrolledPopover Due to a storybook bug, we need to add args to the story parameters in order to show the source. (https://github.com/storybookjs/storybook/issues/... — committed to HoneyRole/reactstrap by HoneyRole 3 years ago
- chore(docs): fix storysource for UncontrolledPopover Due to a storybook bug, we need to add args to the story parameters in order to show the source. (https://github.com/storybookjs/storybook/issues/... — committed to CyberWarrior1224/kriasoft-react-starter-kit by deleted user 3 years ago
- chore(docs): fix storysource for UncontrolledPopover Due to a storybook bug, we need to add args to the story parameters in order to show the source. (https://github.com/storybookjs/storybook/issues/... — committed to nicolestandifer3/reactstrap by nicolestandifer3 3 years ago
- chore(docs): fix storysource for UncontrolledPopover Due to a storybook bug, we need to add args to the story parameters in order to show the source. (https://github.com/storybookjs/storybook/issues/... — committed to johnfrench3/reactstrap-static-config by deleted user 3 years ago
- chore(docs): fix storysource for UncontrolledPopover Due to a storybook bug, we need to add args to the story parameters in order to show the source. (https://github.com/storybookjs/storybook/issues/... — committed to mattstern31/react-strap-static-config by mattstern31 3 years ago
- chore(docs): fix storysource for UncontrolledPopover Due to a storybook bug, we need to add args to the story parameters in order to show the source. (https://github.com/storybookjs/storybook/issues/... — committed to ItoStore/react-strap by ItoStore 3 years ago
I’d try removing the storysource addon first since there are bad interactions between that and docs addon.
The behavior of the
Sourceblock in addon-docs is as follows.source-loader.source-loaderis used by bothaddon-docsandaddon-storysourcebut with slightly different options, which can cause problems. there is an open issue to rewrite a version ofsource-loaderjust foraddon-docs, which should simplify it dramatically and fix a bunch of other problems.It appears that for the React Storybook adding
docs: { source: { type: 'dynamic' } }helps.We’re on:
We provide Storybooks for both web components and React (the React components are a light wrapper around the web components). In the web component Storybook things work fine, but in the React Storybook we still see No code available unless we pass the unused argument to the
renderfunction. Any suggestions on where else to look are appreciated!@andrebnassis that’s the intended behavior. you can read more about it here: https://storybook.js.org/docs/react/writing-docs/doc-blocks#source
@shilman I just created a fresh project so you can look at it. https://github.com/andrebnassis/my-lab/tree/issue/storybook/13362
Setup: Step 1: npx create-react-app sb-mui-lab --template typescript cd sb-mui-lab/ npx sb init yarn add @mui/material @emotion/react @emotion/styled
Step 2: Add configuration on .storybook/main.js to fix mui and storybook’s emotion package conflict https://github.com/andrebnassis/my-lab/tree/issue/storybook/13362/.storybook/main.js
Step 3: Create the following story https://github.com/andrebnassis/my-lab/tree/issue/storybook/13362/src/stories/mui-lab/Button.stories.tsx
Resulting on following Docs with “no code available” for the story with no props on it:
@shilman’s idea of turning off the
addon-storysourceworked like a charm. Been annoying me for weeks on current project, months on the last project. Never had much time to debug and it was THAT simple.