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. image

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

Most upvoted comments

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.

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

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!

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

@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: sb-docs-isse

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.