Open emewjin opened 1 year ago
I'm also seeing this. fwiw, when I use the default glob in main.js there are no issues:
../stories/**/*.stories.@(js|jsx|ts|tsx)'
stories work.
however if I use my slightly complex glob: '../!((**)?node_modules)(**)?/*.stories.js'
the stories are found, but present the error in this ticket.
I am experiencing the same, not sure if you have the same config as I do since you haven't provided your main.ts, but it's worth trying 🤷♂️
I had a config in main.ts
stories: [ "../src/**/*.(story|stories).mdx", "../src/**/*.(story|stories).@(js|jsx|ts|tsx)", ],
Try removing any other naming convention except stories, and renaming all the files accordingly, after that, everything works for me!
I am working in a monorepo and I got this bug when I tried changing the original paths to include not only the src folder but also the packages folder:
main.ts
/(src|packages)/
instead of /src/
I suppose the expected thing to do when you try to match more than one folder is to duplicate the path. I did it and it worked.
Here you have the ones I'm currently using, it works perfectly with "storybook": "^7.0.7":
stories: [ '../packages/**/*.mdx', '../packages/**/*.stories.@(js|jsx|ts|tsx)' ],
Hope it works for you too.
actually what worked for was just to restart/re-run the npm run storybook and it fixed the issue
@AIA-UnKNOWN worked for me!!!
I have this problem trying to migrate from build-webpack to build-vite. I'm using Storybook 7.4.5
. The same error was with 7.1.0-alpha...
.
In dev tools I see this:
const importers = {
};
export async function importFn(path) {
return importers[path]();
};importFn.__docgenInfo={"description":"","methods":[],"displayName":"importFn"}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIiJdLCJzb3VyY2VzQ29udGVudCI6W251bGxdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQSJ9
although the sidebar is populated with stories and MDX docs.
I tried following the advice with changing stories
but that didn't help. Here is my latest attempt:
stories: ['../../../../packages/docs/**/*.(md|mdx|stories.tsx)'],
.
Previously we used this format:
stories: [
{
directory: '../../../docs',
files: '*.(md|mdx)',
},
It's worth noting I'm using mono repo setup.
The files path glob is very sensitive, so the following works:
'*.{md,mdx}'
, but the above *.(md|mdx)
does NOT.
Experience same issue only on MacOS. Tried existing and clean vite project - same issue.
But it is working fine on linux.
This issue keeps happening on my mac. forcing me to restart storybook :/
I especially notice it when creating files and renaming them. Or when changing branches which results in a bunch of stories being removed / added.
Coworkers are starting to no longer use storybook "Because it never works". I've been the strongest advocate for it at my place for years, and it really pains me when I understand their struggle and kinda understand that it's no longer a tool that speeds them up.
If anyone has pointer regarding where the root cause might be, I'm willing to try to take a stab at it.
A similar issue afflicted me on Storybook v7.5.2, with Vite 4.5.0 running on Mac (and using nx for monorepo). Utilising the default file name glob pattern but starting a few directories higher in the tree.
I’m skeptical the root cause is the same as the original issue, but I solved my problem by removing the dashes from my folder names.
Hope it helps someone in the same position.
I solve this problem when add a @
in config.stories. storybook v7.6.3
+ stories: ['../packages/lots-ui/lots/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
- stories: ['../packages/lots-ui/lots/**/*.stories.(js|jsx|mjs|ts|tsx)'],
~🤔 What does the @
does in a glob?~
Found it: https://www.npmjs.com/package/glob#glob-primer
@(pattern|pat*|pat?erN) Matches exactly one of the patterns provided. May not contain / characters.
@KonghaYao worked for me!. just add @
I fixed that with this:
main.ts
/* eslint-disable storybook/no-uninstalled-addons */
import { resolve } from 'path';
import { StorybookConfig } from '@storybook/react-vite';
// inspired by https://github.com/chakra-ui/chakra-ui/blob/77cfa68fb9399d098c3ed71bc8183930e3789dc3/.storybook/main.js
const getStories = (pkg: string) => resolve(__dirname, `../../${pkg}/src/**/**/*.stories.tsx`);
const config: StorybookConfig = {
stories: [
getStories('package1'),
getStories('package2'),
getStories('package3'),
],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-interactions',
'@storybook/addon-a11y',
],
framework: '@storybook/react-vite',
docs: {
autodocs: true,
},
staticDirs: ['../public'],
};
export default config;
I solve this problem when add a
@
in config.stories. storybook v7.6.3+ stories: ['../packages/lots-ui/lots/**/*.stories.@(js|jsx|mjs|ts|tsx)'], - stories: ['../packages/lots-ui/lots/**/*.stories.(js|jsx|mjs|ts|tsx)'],
This worked for me! Thaks @KonghaYao! 👍
Describe the bug
When using Storybook version 6.5.15 in monorepo with
vite
, there were no issues. But after migrating to version 7, an error occurred.To Reproduce
clone https://github.com/emewjin/sb-bug-reproduce-project and following README steps
System
Additional context
No response