Open MarkLyck opened 2 years ago
@MarkLyck 60s is quite a long time to build a Storybook, especially one so small. I don't have a lot of experience with the Vite builder so cannot say for sure, but I wonder if something is unusual with your setup to make that happen? Can you try simplifying to see what might be causing it?
We have a much larger storybook that gets OOM errors in our CI environment. This has happened more frequently more recently, I believe we've probably been slowly approaching these limits for a while:
So re: the original question, I'm also curious if memory usage is configurable here, with something similar to Node's --max-old-space-size
for example?
We started encountering this issue today and our stories can no longer be published via Github Actions.
We are also having intermittent memory issues. We use github actions which I think only provides 7GB and we build using nrwl's storybook builder. We've been using it for a while without any issues, but I guess we've been ramping up usage the past couple of weeks.
Same here, we have ~70 stories and use @storybook/builder-vite
. Any ideas?
Can folks let us know a couple of things when reporting problems here:
build-storybook
directly in on your CI server? [1]builder-vite
is a common thread here, and we'll investigate that.[1] If it isn't a problem when building directly, that's super interesting, but also you might as a workaround just do that and pass the result into chromatic.
Do you see the same issue when running build-storybook directly in on your CI server [1]
Sorry, I could have specified: we are using github actions as well. This helped:
env:
# 7 GiB by default on GitHub, setting this to 16 GiB
NODE_OPTIONS: --max-old-space-size=16384
Hey peeps! Could you share the versions of vite
and @storybook/builder-vite
? Thanks!
Hey peeps! Could you share the versions of
vite
and@storybook/builder-vite
? Thanks!
@storybook/builder-vite@0.1.36
and vite@2.9.10
Thanks for your support!
@tmeasday Started seeing this error in our project a few days ago and finally had some time to investigate it a bit today.
Relevant versions Storybook 6.5.6 @storybook/builder-vite 1.3.6 vite 2.9.13
I then upgraded to: Storybook 6.5.9 @storybook/builder-vite 0.2.0 vite 3.0.2
Still getting the same error.
When I run build-storybook
locally I noticed a chunk size warning and some very large files... vendor.js especially
I modified our /.storybook/main.js
to chunk some of the obvious vendor libs (took my best guess at some of the sb deps: lodash & react), and am also turning of sourcemap generation temporarily. It's a bit messy as I'm still trying to figure out the best chunking strategy, but hopefully this will help some others with this issue.
// .storybook/main.js
const { mergeConfig, splitVendorChunkPlugin } = require("vite");
const { resolve } = require("path");
module.exports = {
stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
framework: "@storybook/vue3",
core: {
builder: "@storybook/builder-vite",
},
typescript: {
check: false,
checkOptions: {},
reactDocgen: "react-docgen-typescript",
reactDocgenTypescriptOptions: {
shouldExtractLiteralValuesFromEnum: true,
propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
},
},
async viteFinal(config, { configType }) {
// TRY to reduce file sizes for SB to avoid GA chromatic deploy failure
//const usePlugins = [];
if (configType === "PRODUCTION") {
//usePlugins.push(splitVendorChunkPlugin());
// temporarily bumping up chunk size until we can figure out what's bloating this for SB
// config.build.chunkSizeWarningLimit = 15000;
config.build.sourcemap = false;
}
// return the customized config
return mergeConfig(config, {
// customize the vite config here
//plugins: usePlugins,
build: {
rollupOptions: {
output: {
manualChunks: {
lodash: ["lodash"],
vue: ["vue"],
react: ["react"],
"element-plus": ["element-plus"],
// storybook: ["storybook"], // breaks ALL THE THINGS
// webpack: ["webpack"], // also breaks ALL THE THINGS
// probably more SB deps should be added here...
},
},
},
},
resolve: {
alias: {
"@": resolve(__dirname, "/src"),
"~": resolve(__dirname, "/src"),
},
},
});
},
};
I'm no longer seeing the memory error in GA and am able to deploy to Chromatic again but there is still a very large file in the sb exports iframe.js
that generates a chunk size warning.
Not sure if this is a SB, Chromatic or vite issue but I suspect it may be related to https://github.com/storybookjs/builder-vite/issues/409.
We're having an "allocation failure" when chromaui/action@v1 builds a react storybook and I noticed a similarity in the build logs:
Building your Storybook
β Running command: npm run --silent build-storybook -- --output-dir ...
...
βΉ Spawn settings:
{
"client": "npm",
We're using yarn, as is the original report above, but the action is running npm.
Should chromatic-cli be detecting and using yarn? I don't see a way to manually specify the client.
Hey @penx! π
The CLI uses yarn-or-npm to figure out if the project is using yarn
or not. It should follow this workflow:
yarn.lock
file is in the nearest package directory - yarnpackage-lock.json
file is in the nearest package directory - npmyarn
is installed - yarnDoes your project maybe have a package-lock.json
file that's causing it to return npm
as your package manager?
Does your project maybe have a
package-lock.json
file that's causing it to returnnpm
as your package manager?
No, we have a single yarn.lock at the monorepo root and no package-lock.json files.
We seem to have got past the memory issues after further runs, but the action is still using npm
at this step.
If I run yarn chromatic --dry-run -t <token> --force-rebuild --debug
locally, it shows
Using spawnParams: {
"client": "yarn",`.
However, if I run npx chromatic --dry-run -t <token> --force-rebuild --debug
locally, it shows
Using spawnParams: {
"client": "npm",
(I appreciate this may be unrelated to this issue, let me know if you want me to raise a new one!)
Forwarding from a related issue, disabling sourcemaps for the build serves as a workaround until this is fixed in vite.
viteFinal: (config) => { return { ...config, build: { ...config.build, sourcemap: false, target: ['es2020'], }, } }, }
Hey peeps! This really is an issue with Vite itself, and until it's solved the @storybook/builder-vite
package can't do much.
This is not a Chromatic issue, though it affect users that use Storybook + Vite and deploy their Storybooks to Chromatic.
I also wanted to add that sourcemaps are set to true by the @storybook/addon-coverage
, so in case you are experiencing such issue that could be the reason.
Hopefully the Vite (or Rollup) maintainers will track the issue down and come up with a fix as soon as they can!
I am trying to get my Chromatic github action to work, but no matter what I try it always runs out of memory.
This is my workflow chromatic.yml file:
and here is the output when running in github actions:
When I build my storybook locally it builds just fine in about ~60s.
If I run chromatic-cli locally it always works just fine. It is only in GitHub actions it fails with this error.
My storybook is not even that big either, I have around 40 stories π€·ββοΈ
Here is my .storybook/main.ts file: