builder-vite
builder-vite copied to clipboard
storybookjs
Missing stories & TailwindCSS JIT not triggered
When I start Storybook it starts with some stories but not every story. After some random event, something triggers and the rest of the stories appear and TW kicks in. I have no idea what triggers it. Sometimes it happens right after the regular start, let's say 1sec after. Sometimes it triggers after I start navigating the storybook, and sometimes it just never happen and I'm stuck.
The event that show up is [vite] new dependencies found: ... , but what makes it trigger sometimes and sometimes not. I mean I don't randomly add or remove a dependency.
So I don't know if it's the vite builder itself or vite, I hope you can help.
Start logs
info @storybook/react v6.3.1
info
info => Loading presets
info Found existing addon "@storybook/addon-actions", skipping.
info => Using cached manager
Pre-bundling dependencies:
tslib
connected-react-router
react
react-dom
react-intl
(...and 113 more)
(this will be run only when your dependencies or config have changed)
╭───────────────────────────────────────────────────╮
│ │
│ Storybook 6.3.1 started │
│ 3.76 s for preview │
│ │
│ Local: http://localhost:6006/ │
│ On your network: http://192.168.1.40:6006/ │
│ │
│ A new version (6.3.6) is available! │
│ │
│ Upgrade now: npx sb@latest upgrade │
│ │
│ Read full changelog: https://git.io/fhFYe │
│ │
╰───────────────────────────────────────────────────╯
After random event
3:13:11 PM [vite] new dependencies found: storybook-addon-intl, updating...
3:13:14 PM [vite] ✨ dependencies updated, reloading page...
warn - You have enabled the JIT engine which is currently in preview.
warn - Preview features are not covered by semver, may introduce breaking changes, and can change at any time.
3:13:18 PM [vite] new dependencies found: @tippyjs/react/headless, updating...
3:13:19 PM [vite] ✨ dependencies updated, reloading page...
3:13:21 PM [vite] new dependencies found: @storybook/addon-actions, updating...
3:13:22 PM [vite] ✨ dependencies updated, reloading page...
In viteFinal() you can add these dependencies to the optimizeDeps list. Then, your dependencies will be preprocessed by esbuild so that everything is available instantly when you start Storybook.
Sometimes you will also have to rm -rf node_modules/.vite to clear the cache, if something has gone wrong.
It doesn't change anything. Also I expect the project to work, even if it takes to time to boot up. Right now the storybook is less than incomplete, there is no style available because TW had produced no CSS
Yes, it should work. That's strange... what does your viteFinal look like exactly?
Nothing fancy
async viteFinal(config) {
config.plugins.push(tsconfigPaths(), svgr());
config.optimizeDeps.include.push(
'storybook-addon-intl',
'@storybook/addon-actions',
'@tippyjs/react/headless'
);
return config;
},
You might have to add Tailwind config there as well? The Storybook Vite config doesn't extend your "normal" Vite config at all, it's entirely separate.
Tailwind requires no setup at all. Just include the Tailwind CSS in the app and you're good to go.
So in my .storybook/preview.js I have import "../src/styles/css/tailwind.css". That's it
Ah, I see! I thought the JIT thing needed some Vite config. Can you try Storybook v6.3.6? There was a bug in earlier version of 6.3 but that could be unrelated.
You could also try <link rel="stylesheet" href="/styles/css/tailwind.css"> in the preview-head.html config.
Upgrading to 6.3.6 has no effect.
The TW file is not exposed as a public asset. I tried to add a preview-head.html file with <link rel="stylesheet" href="/tailwind.css"> and it does nothing. /tailwind.css is the url I see in the devTools when TW works.
Tailwind JIT does indeed require extra config, its not going to automagically work just by importing a CSS file. https://tailwindcss.com/docs/just-in-time-mode
I had tailwind configured before switching to vitejs, and it worked fine. This is not a Tailwind issue. When I said Tailwind requires no setup I mean vitejs wise.
I was replying in the context of this comment
Tailwind requires no setup at all. Just include the Tailwind CSS in the app and you're good to go.
and the title
TailwindCSS JIT not triggered
My response is clearly just stating that tailwind JIT won't just work by importing a CSS file alone
May or may not be of some use. https://github.com/adamwathan/tailwind-jit-vite-example