storybook
storybook copied to clipboard
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
.