storybook icon indicating copy to clipboard operation
storybook copied to clipboard

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

Open MechJosh0 opened this issue 3 years ago • 17 comments

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.

MechJosh0 avatar Dec 03 '20 08:12 MechJosh0