Docs addon is not showing story code (No code available) unless you provide an unused variable into the function parameters

[MechJosh0]

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.

[tstordyallison]

Hey,

Any updates on this one? We are seeing it too.

Anyone know where to start/know roughly where the bug might be?

Tom

[shilman]

I'd try removing the storysource addon first since there are bad interactions between that and docs addon.

The behavior of the Source block in addon-docs is as follows.

• If the story function accepts an arguments, it tries to dynamically render a source snippet based on the output of the story function
• If the story function accepts no arguments, it uses a statically-generated code snippet added by something called source-loader. source-loader is used by both addon-docs and addon-storysource but with slightly different options, which can cause problems. there is an open issue to rewrite a version of source-loader just for addon-docs, which should simplify it dramatically and fix a bunch of other problems.

[himerus]

I'd try removing the storysource addon first since there are bad interactions between that and docs addon.

@shilman's idea of turning off the addon-storysource worked 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.

[shyam528]

I am reading the content from read me file to create the doc. Is there any way to show the code with this approach?

[skylarmb]

Seeing this with a freshly bootstrapped react implementation using CSF 2.0 and storybook 6.4. Code is only available if i supply unused args param or if i use CSF 3.0

    "@storybook/addon-actions": "^6.4.0",
    "@storybook/addon-essentials": "^6.4.0",
    "@storybook/addon-links": "^6.4.0",
    "@storybook/preset-scss": "^1.0.3",
    "@storybook/react": "^6.4.0",

"No code available" (CSF 2.0)

export const MyStory = () => <MyComponent />

Code shows properly (CSF 2.0)

export const MyStory = (args) => <MyComponent />

Code shows properly (CSF 3.0)

export default { component: MyComponent };
export const MyStory = {};

[shilman]

@skylarmb do you have a "no code available" reproduction i can look at?

[andrebnassis]

@skylarmb do you have a "no code available" reproduction i can look at?

@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]

@andrebnassis thanks for the reproduction!

i traced it down and it looks like there was an unintentional breaking change in prettier that was recently fixed here: prettier/prettier#11892

please try upgrading prettier when they release their next update!

[andrebnassis]

@andrebnassis thanks for the reproduction!

i traced it down and it looks like there was an unintentional breaking change in prettier that was recently fixed here: prettier/prettier#11892

please try upgrading prettier when they release their next update!

Thanks @shilman! It works!

I just want to check a tiny behavior (I don't know if it is expected or not).

When the story has no props, the code generated includes the arrow function on it.
When the story has props, the code generated includes only the code itself (without the arrow function).

Is it correct? I would expect in both cases that the code generated would shows me only the code itself (without the arrow function).

[shilman]

@andrebnassis that's the intended behavior. you can read more about it here: https://storybook.js.org/docs/react/writing-docs/doc-blocks#source

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[jegli]

Had the same issue: In my case it got resolved by updating storybook & addons to the latest version (6.4.19).

[denyskorolkov]

Tried to update storybook & addons to (6.4.19). This issue is still reproduced for me. However, adding an unused argument to the story function works properly.

[vhoyer]

Tried to update storybook & addons to (6.4.19). This issue is still reproduced for me. However, adding an unused argument to the story function works properly.

I can replicate this behavior @denyskorolkov described on 6.5.9, but I really wanted a global solution 😅

EDIT:
further development lead me to discover that if I set inlineStories to false, then the dynamic source code appears, but this is not an ideal solution, because of all the problems that arise with the use of iframes

[daneah]

We're on:

• Storybook 6.5.13
• CSF 3
• Prettier 2.7.1

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 render function. Any suggestions on where else to look are appreciated!

[daneah]

It appears that for the React Storybook adding docs: { source: { type: 'dynamic' } } helps.