Is it normal to have duplicated "id" in preview-stat.json?
AinaM opened this issue · comments
Hello,
I'm trying to add Turbosnap to my build process for Chromatic
When doing a change to a file *.stories.ts, the change is correctly detected and the snapshot done.
But when changing for example the Vue component directly, no change is not detected.
I'm trying to figure out "at which level" is the issue
Following TurboSnap # Why are no changes being detected?, I tried the command
npx chromatic trace [...changed file paths]
-> same issue, when giving the path of .stories.ts file, it is detected, but not with a .vue file
For example npx chromatic trace ./src/components/DbRate.stories.ts --mode expanded
ℹ Traced 1 changed file to 1 affected story file:
— src/components/DbRate.stories.ts [changed]
∟ [story index]
But if I give the path to my component npx chromatic trace ./src/components/DbRate.vue --mode expanded
ℹ Traced 1 changed file to 0 affected story files:
I wanted to confirm if the file storybook-static/preview-stats.json is correctly generated
When searching DbRate inside the json file, we can find 3 blocks:
block 1
{
"id": "./src/components/DbRate.stories.ts",
"name": "./src/components/DbRate.stories.ts",
"reasons": [
{
"moduleName": "/virtual:/@storybook/builder-vite/storybook-stories.js"
}
]
},block 2
{
"id": "./src/components/DbRate.vue",
"name": "./src/components/DbRate.vue",
"reasons": [
{
"moduleName": "./src/components/DbRate.stories.ts"
}
]
},block 3
{
"id": "./src/components/DbRate.vue",
"name": "./src/components/DbRate.vue",
"reasons": [
{
"moduleName": "./src/components/DbRate.vue"
}
]
},We can see that block 2 and block 3 have the same id.
If I delete manually the last block from the json file (block 3), and I run again the command line, the output seems correct
npx chromatic trace ./src/components/DbRate.vue --mode expanded
ℹ Traced 1 changed file to 1 affected story file:
— src/components/DbRate.vue [changed]
∟ src/components/DbRate.stories.ts
∟ [story index]
I'm not familiar with the expected output of storybook-static/preview-stats.json
Is it normal to have "Block 3" (that has a duplicated id with Block 2), or is there an issue with the generation of the file?
Would you be willing to make a minimal reproduction that I could take a look at?
Sure, I re-created a small repo here: https://github.com/AinaM/repro-storybook
It's very basic
- Created a new projet with
npm create vue@3 - Added storybook with
npx storybook@latest init - Added vite-plugin-turbosnap
I did not install Chromatic, as I only wanted to confirm if it would generate duplicated id in storybook-static/preview-stats.json
To reproduce the issue
- Build storybook, with the option to generate the json file
npm run build-storybook -- --webpack-stats-json - Go to
storybook-static/preview-stats.json - search for
"id": "./src/stories/Button.vue"
Block 1
{
"id": "./src/stories/Button.vue",
"name": "./src/stories/Button.vue",
"reasons": [
{
"moduleName": "./src/stories/Button.stories.ts"
},
{
"moduleName": "./src/stories/Header.vue"
}
]
},Block 2 (same ID)
{
"id": "./src/stories/Button.vue",
"name": "./src/stories/Button.vue",
"reasons": [
{
"moduleName": "./src/stories/Button.vue"
}
]
},If you use stackblitz, and then run npm run build-storybook -- --webpack-stats-json, you should be able to quickly reproduce
https://stackblitz.com/github/AinaM/repro-storybook
Let me know if I should put the example somewhere else, or ad something else
Perfect, thanks. It's been a while since I messed with any of this, but I'll try to dig in as soon as I get a chance!
