Invalid Storybook Build
Closed this issue · 12 comments
Chromatic CLI v6.5.4
https://www.chromatic.com/docs/cli
✔ Authenticated with Chromatic
→ Using project token '************'
✔ Retrieved git information
→ Commit 'commit' on branch 'branch'; found 1 parent build
✔ Collected Storybook metadata
→ Storybook ^6.4.22 for React; supported addons found: Actions, Backgrounds, Docs, Essentials, Lin
ks
↓ Build Storybook [skipped]
→ Using prebuilt Storybook at storybook-static/
✖ Publish your built Storybook
→ Invalid Storybook build at storybook-static/
Verify your Storybook
Test your stories
✖ Failed to publish your built Storybook
Invalid Storybook build at storybook-static/
→ View the full stacktrace below
If you need help, please chat with us at https://www.chromatic.com/docs/cli for the fastest response.
You can also email the team at support@chromatic.com if chat is not an option.
Please provide us with the above CLI output and the following info:
{
"timestamp": "2022-05-14T12:37:52.832Z",
"sessionId": "d3d781d1-bcac-406a-bdf5-54337713580c",
"gitVersion": "2.25.1",
"nodePlatform": "linux",
"nodeVersion": "16.15.0",
"packageName": "chromatic",
"packageVersion": "6.5.4",
"storybook": {
"addons": [
{
"name": "actions",
"packageName": "@storybook/addon-actions",
"packageVersion": "^6.4.22"
},
{
"name": "backgrounds",
"packageName": "@storybook/addon-backgrounds",
"packageVersion": "^6.4.22"
},
{
"name": "docs",
"packageName": "@storybook/addon-docs",
"packageVersion": "^6.4.22"
},
{
"name": "essentials",
"packageName": "@storybook/addon-essentials",
"packageVersion": "^6.4.22"
},
{
"name": "links",
"packageName": "@storybook/addon-links",
"packageVersion": "^6.4.22"
}
],
"viewLayer": "react",
"version": "^6.4.22"
},
"flags": {
"exitZeroOnChanges": "",
"storybookBuildDir": [
"storybook-static/"
],
"projectToken": [
"REDACTED"
],
"outputDir": [],
"externals": [],
"untraced": [],
"interactive": true,
"appCode": []
},
"exitCode": 0,
"exitCodeKey": "OK",
"errorType": "Error",
"errorMessage": "✖ Failed to publish your built Storybook"
}
I get the same error (Invalid Storybook build) when letting chromatic build storybook with npx chromatic --project-token ... or by passing it the built folder with npx chromatic --exit-zero-on-changes -d storybook-static/ --project-token=....
Storybook works fine on its own.
These are my build folder contents:
0.2f727af8bd8140d7353f.manager.bundle.js
4.b424631a75c096e3f73e.manager.bundle.js
4.b424631a75c096e3f73e.manager.bundle.js.LICENSE.txt
5.c259fa960f9f958f32cd.manager.bundle.js
6.c7e2f997229f91d916e8.manager.bundle.js
6.c7e2f997229f91d916e8.manager.bundle.js.LICENSE.txt
7.a16f201360fc3133ba99.manager.bundle.js
8.0fcf98f7e6d0fdd6c7fc.manager.bundle.js
favicon.ico
index.html
main.4837f83a2e7238a9b57b.manager.bundle.js
runtime~main.a1feafd47e231ba5a583.manager.bundle.js
vendors~main.57126e1f461bb881b21b.manager.bundle.js
vendors~main.57126e1f461bb881b21b.manager.bundle.js.LICENSE.txt
Hi @pietrovismara -- your build folder should have an iframe.html inside it. It looks like maybe the build has failed in some unusual way. Do you have a custom webpack config for your Storybook?
Hi @tmeasday, thanks for the hint, I'm using vite and I realized my build configuration was incorrect. Solved.
@pietrovismara Hi, I am facing the same issue with Vite too. Can you provide your solution please?
@Rusinas I can't remember exactly what was the issue but it was very specific to my case so I didn't think it would be useful to post the fix here.
What's important is that your viteFinal config in .storybook/main.js is correct. You should make sure that if you build storybook (without launching chromatic) the resulting build of your app is correct. Once that is true, chromatic should work as well.
@Rusinas now I remember, in the viteFinal config in .storybook/main.js I accidentally overwrote the storybook output config. Make sure you preserve the original config when customizing it.
@pietrovismara thank you so much for the answer! Maybe you could share your storybook/main.js and vite.config.js? It would be so great because there is no information about this issue anywhere and this could help others as well.
I don't really know how to make sure that the viteFinal is correct because build is going well. I have iframe.html inside of ./storybook-static as @tmeasday mentioned and bunch of other files
@Rusinas I can't share my config as it's closed source code but it's a very simple configuration, plus the vite.config.js file should have no impact on your storybook build, only the viteFinal config. Perhaps you could share your configuration and the contents of your build folder?
@pietrovismara Alright. Mine is closed too, but I don't think there is something really project-specific.
Here is the output:
Looks like a little bit too much files for me but idk
storybook/main.js
async viteFinal(config, { configType }) {
const { config: viteConfig } = await loadConfigFromFile(
resolve(__dirname, '../vite.config.js')
);
const finalConfig = {
...viteConfig,
optimizeDeps: {}
}
// ENV SPECIFIC CONFIGURATION
// console.logs might be useful for debugging in CI
if (process.env.VITE_BUILD_STORYBOOK) {
console.log('Build for Chromatic...');
finalConfig.build = {
...finalConfig.build,
outDir: 'storybook-static',
emptyOutDir: false,
sourcemap: true,
};
} else if (configType === 'DEVELOPMENT') {
console.log('Build for Development...');
finalConfig.optimizeDeps.icnlude = [
...(config.optimizeDeps?.include ?? []),
'@storybook/vue',
'@storybook/vue/dist/esm/client/preview/config',
'@storybook/addon-actions/dist/esm/preset/addDecorator.js',
'@storybook/addon-actions/dist/esm/preset/addArgs.js',
'@storybook/addon-backgrounds/dist/esm/preset/addDecorator.js'
];
};
return mergeConfig(config, {
...finalConfig,
})
},
vite.config.js
import { defineConfig } from 'vite';
import path from 'path';
import typescript from '@rollup/plugin-typescript';
import Components from 'unplugin-vue-components/vite';
import { VuetifyResolver } from 'unplugin-vue-components/resolvers';
import { createVuePlugin } from 'vite-plugin-vue2';
import createSvgSpritePlugin from 'vite-plugin-svg-sprite';
export default defineConfig(({ mode }) => {
let outputDir = 'dist';
let formats = ['cjs', 'esm'];
let plugins = [
Components({
dts: false,
resolvers: [
VuetifyResolver(),
],
}),
];
if (process.env.VITE_BUILD_STORYBOOK) {
outputDir = 'storybook-static';
formats.filter(format => format === 'cjs');
} else if (mode === 'production') {
plugins.unshift(
createVuePlugin({
vueTemplateOptions: {
isProduction: true,
},
}),
);
} else if (mode === 'development') {
plugins.push(
createSvgSpritePlugin({
symbolId: 'icon-[name]',
})
);
}
const baseConfig = {
resolve: {
alias: {
'~': path.resolve(__dirname, './stories'),
'@': path.resolve(__dirname, './src'),
data: path.resolve(__dirname, './data'),
vue$: 'vue/dist/vue.esm.js',
},
},
plugins,
css: {
preprocessorOptions: {
scss: {
additionalData: `
@import "@/assets/vuetify.scss";
@import "@/assets/global.scss";\n
`,
},
sass: {
additionalData: '\n@import "@/assets/vuetify.scss"\n',
},
},
},
build: {
lib: {
formats,
entry: path.resolve(__dirname, 'src/entry.ts'),
name: 'ProjectName',
fileName: (format) => `project-name.${format}.js`,
},
rollupOptions: {
external: [
'vue',
'vuetify/lib',
'vuetify/lib/directives',
'date-fns',
'date-fns/locale',
],
output: {
dir: outputDir,
exports: 'named',
globals: {
vue: 'Vue',
},
},
plugins: [
typescript({
target: 'es2020',
rootDir: path.resolve(__dirname, 'src'),
declaration: true,
declarationDir: path.resolve(__dirname, outputDir),
exclude: [
path.resolve(__dirname, 'node_modules/**'),
path.resolve(__dirname, 'src/tests/**'),
],
allowSyntheticDefaultImports: true,
}),
],
},
},
};
return baseConfig;
});
That's it. Pretty simple configartion too
Mmmh the contents of the folder look fine so it looks like the issue you're having is different from the one I had. Also, I use React so it might be something related to Vue in your case.
The only thing I can suggest at this point is to try to remove each customization of the config one by one until you see some difference with the result.
I'm not gonna be of great help I'm afraid. It would be cool if chromatic gave some more info as to why the build is invalid.
@pietrovismara thanks anyway :)
Found the solution. Cause of the problem was that I didn't have createVuePlugin() enabled for chromatic build. It's weird thing, because in some cases enabling it causes more issues (npm run dev wouldn't work for example), so I thought it shouldn't be required for Chromatic. I was wrong.
Actually, what helped me is --debug flag 😂
I encountered this error today and after much googling and tweaking options, I realized that the storybook build script for chromatic specified in my package.json had been changed and was actually building a completely different app. 🤦♂️