'Storybook + Vite Shows "No Preview" But still renders story
Following the instructions of storybooks vite plugin documentation, I am able to start storybook with a bit of extra configuration:
// .storybook/main.js
module.exports = {
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-interactions",
],
core: {
builder: "storybook-builder-vite",
},
features: { storyStoreV7: true },
framework: "@storybook/react",
stories: ["../**/*.stories.@(js|jsx|ts|tsx)", "../**/*.stories.mdx"],
async viteFinal(config, { configType }) {
if (configType === "DEVELOPMENT") {
config.optimizeDeps.include = [
...config?.optimizeDeps?.include,
"jest-mock",
];
}
config.define = {
...config.define,
global: "window",
};
return config;
},
};
Even with the default created components, the top of each story shows a strange empty props table and the message that "No Preview" can be found despite the story rendering below it. Note the "Button" below the strange messaging.
I tried both kinds of story creation methods as can be seen below with no difference. Storybook functions well despite this, but having the false negatives is not ideal. Has anyone ran into this and found a suitable reasoning for it / a workaround?
import React from "react";
import { ComponentMeta, ComponentStory } from "@storybook/react";
import { Button } from "@local/core-components";
export default {
title: "Button",
component: Button,
} as ComponentMeta<typeof Button>;
const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
export const Simple: ComponentStory<typeof Button> = () => (
<Button>I'm a Button!</Button>
);
export const Complex = Template.bind({});
Complex.args = {
children: "I'm a button",
title: "I'm a button",
};
Solution 1:[1]
This should be fixed in recent versions of @storybook/builder-vite. If you're still encountering this issue, can you please open a bug report at https://github.com/storybookjs/builder-vite?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | IanVS |

