SB7 can't find any story

[royal remnant]

Hello I'm using SB 7 with vitejs builder, I think i migrated everything correctly but for some reasons SB can't find any story in my project.

Here in the example i tried to to a single story, to see if it could solve the issue, but no luck.

Any idea? about what I'm missing? it's quite hard to debug because in the console i get no error, beside the one that tells that there no stories.

this is my config

const path = require('path');

module.exports = {
  stories: ['../src/base-components/button/*.stories.tsx'],
  staticDirs: [path.resolve(__dirname, '../public')],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    {
      name: '@storybook/addon-postcss',
      options: {
        postcssLoaderOptions: {
          implementation: require('postcss'),
        },
      },
    },
  ],
  features: {
    storyStoreV7: true,
  },
  core: { builder: "@storybook/builder-vite" },
  framework: {
    name: '@storybook/react-vite',
    options: { fastRefresh: true },
  },
  docs: {
    autodocs: "tag"
  }
}

this is my story

import type { Meta } from '@storybook/react';

const meta: Meta<typeof Button> = {
  /* 👇 The title prop is optional.
   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
   * to learn how to generate automatic titles
   */
  title: 'base-components/Button',
  component: Button,
};

export default meta;

strange

@wet surge sorry to bother you, do you have any idea about this? i invested a lot of time on this even chatgpt can't help ahah

[wet surge]

Hey @royal remnant,

Beside of a default export, you need to define actually one Story. A kinda default story is enough:

export const DefaultStory: StoryObj<typeof Button> = {}

Does this fix your issue?

[royal remnant]

ah i understood this was not required anymore

i try

[wet surge]

I mean, it is only an assumption. Maybe it is not required anymore and I missed that information 🙂

[royal remnant]

ah ye now it shows up

but it doesn't work

i'm using tailwindcss and i'm importing global style in preview.js with this import '../src/styles/main.css'

is this something that still works?

thanks, i moved one step further 😄

[wet surge]

could you provide a reproduction? Then I can take a look tomorrow.

[royal remnant]

sure, i play around with it a little bit more

then if i can't find a way i'll create a repo on gh

thanks, have a good evening

[royal remnant]

Morning @wet surge, i think I found the problem.

In preview.js I’m importing my ‘main.css’.

Inside main css I’m importing the tailwind base css. If I remove the lines related to tailwind it works, but then the style is wrong.

if I put it back they story keeps loading.

The strange thing is that the tailwind classes are working correctly in my components, the problem is just related to the three lines of css I have to import in the entry point.

@tailwind base;
@tailwind components;
@tailwind utilities;

I have my post css config with the tailwind plug-in in it and from what I understand vitejs should read it automatically.

[wet surge]

Hey @royal remnant,

Does maybe this video help you further?:
https://www.youtube.com/watch?v=zlmpn88LxNM&t=11s

It was released 5 days ago and it describes how to use tailwind together with Storybook.

[royal remnant]

:S this was works normally in sb 6

without this compiling thing

anyway i'll give it a try

[wet surge]

Please let me know, if the video didn't help. Then let's elaborate further 🙂

[royal remnant]

found the problem, basically

module.exports = {
  content: [
    './**/*.{js,ts,jsx,tsx}'
  ],
  theme: {
    extend: theme
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
    require("@tailwindcss/line-clamp"),
    require('@headlessui/tailwindcss')({ prefix: 'ui' })
  ]
}

this is my tw config

the content key for some reason was breaking the whole vite builder

passing an empty array did the trick

i tell you so you know if someone else asks 😄 thanks for your time

[wet surge]

Hmm. That's interesting. 🤨 Would you like to open a Github issue for this problem? Then me or someone else from my team will revisit it at a later point.