Closed MarkLyck closed 2 years ago
I noticed my storybook takes a lot longer than usual to build. (I was expecting the opposite.)
Vite is definitely fast in development (esbuild, no bundler), but when it builds for production, it uses rollup, which does a lot of work to bundle and treeshake, so it does take some time. That said, you shouldn't be running out of memory. You can try increasing the amount available to node with a top-level env
key in your workflow:
env:
# 7 GiB by default on GitHub, setting to 6 GiB
# https://docs.github.com/en/actions/using-github-hosted-runners/about-github-hosted-runners#supported-runners-and-hardware-resources
NODE_OPTIONS: --max-old-space-size=6144
As for the sourcemap errors, I think the reason you don't see the output/errors is that chromatic builds storybook with a --silent
flag, (npm run --silent build-storybook -- --output-dir /tmp/chromatic--1793-Q7ZOg74Tk9jA --webpack-stats-json /tmp/chromatic--1793-Q7ZOg74Tk9jA
). You can build the storybook in a previous step in your workflow, and then pass the directory to the chromatic action, if you'd prefer to see the output.
I've opened https://github.com/joshwooding/vite-plugin-react-docgen-typescript/issues/1 to explore adding sourcemap support to that plugin.
@IanVS Thanks for the quick answer again :)
Adding the --max-old-space-size to the action did get my chromatic GitHub action passing now. 🎉
Although I do wonder if it's really supposed to be using that much more memory with vite than with webpack?
Sadly I seem to also have run into more problems and inconsistencies with the production built storybook vs the dev storybook. But that's unrelated to this memory issue.
Thanks again for the help! and for opening that ticket in the react-docgen plugin.
Sadly I seem to also have run into more problems and inconsistencies with the production built storybook vs the dev storybook
I'd love to hear more about this, if you don't mind opening another issue or jumping into the #vite channel in the storybook discord.
@IanVS let me have a crack at it first :) but yeah I'll join the discord or create a ticket if I can't solve it.
@IanVS Yeah. The last few inconsistencies were due to environment variables not being picked up when building production vs building development.
Now the only things left to "solve" are why my vite storybook is so slow, and the source maps you already created another issue for.
It's not just the production build that's slow for me. But the development build can sometimes take over a minute to start up as well. (on my M1 max) I'm not sure why yet. dev mode started faster with CRA. But that's likely something specific to my project I'd imagine.
I have another smaller project where vitejs storybook starts much faster than the CRA version.
That's definitely strange. Vite can take some time to load in the browser in dev mode, but the dev server should start within a few seconds. My own storybook has 115 story files and nearly 500 stories, and it starts up in 10 seconds on my intel mac. Feel free to hop into the discord if you want to chat more about it.
It seems like maybe this is a known vite issue: https://github.com/vitejs/vite/issues/2433
Just wanted to bump this thread to note that I'm experiencing this issue too. I can run build-storybook
fine on my local machine, but when I push it up GitHub actions isn't able to cope:
info @storybook/react v6.5.9
info
info => Cleaning outputDir: /tmp/chromatic--1674-kAg7sLbcOrpG
info => Loading presets
info Found existing addon "@storybook/addon-actions", skipping.
info => Compiling manager..
vite v3.0.2 building for production...
transforming...
Use of eval is strongly discouraged, as it poses security risks and may cause issues with minification
Use of eval is strongly discouraged, as it poses security risks and may cause issues with minification
Use of eval is strongly discouraged, as it poses security risks and may cause issues with minification
Error when using sourcemap for reporting an error: Can't resolve original location of error.
Non-existent export '__exports' is imported from {{MY_PROJECT}}/node_modules/core-js/modules/es.object.get-own-property-descriptors.js?commonjs-exports
✓ 2515 modules transformed.
Generated an empty chunk: "react-dom-client-placeholder"
rendering chunks...
<--- Last few GCs --->
[1738:0x5a89770] 92911 ms: Scavenge 2023.5 (2077.0) -> 2021.0 (2078.3) MB, 18.3 / 0.0 ms (average mu = 0.321, current mu = 0.293) allocation failure
[1738:0x5a89770] 92966 ms: Scavenge 2024.9 (2078.5) -> 2023.2 (2082.8) MB, 35.4 / 0.0 ms (average mu = 0.321, current mu = 0.293) allocation failure
[1738:0x5a89770] 93404 ms: Scavenge 2028.8 (2082.8) -> 2024.7 (2100.3) MB, 406.2 / 0.0 ms (average mu = 0.321, current mu = 0.293) allocation failure
<--- JS stacktrace --->
FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
1: 0xb0a860 node::Abort() [node]
2: 0xa1c193 node::FatalError(char const*, char const*) [node]
3: 0xcf9a6e v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [node]
4: 0xcf9de7 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [node]
5: 0xeb1685 [node]
6: 0xec134d v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [node]
7: 0xec404e v8::internal::Heap::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [node]
8: 0xe8558a v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationType, v8::internal::AllocationOrigin) [node]
9: 0x11fe2d6 v8::internal::Runtime_AllocateInYoungGeneration(int, unsigned long*, v8::internal::Isolate*) [node]
10: 0x15f2d39 [node]
Aborted (core dumped)
I'm using:
@alextompkins are you able to give node a bit extra memory? Github runners have 7gb or so available, it's normally safe to increase the --max-old-space-size
.
@IanVS yup that did the trick. Still seems odd that vite would need >1.4GB but 🤷
Yeah, I've spent some time trying to understand what's going on and why it is using so much, without any luck so far.
Have found myself at the bottom of this thread after cranking up max_old_space_size on a github runner to 64gig with no luck although the error is now "Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory" instead of "Reached heap limit Allocation failed - JavaScript heap out of memory" which happened at 32gig.
Our storybook contains 36 components if that gives a sense of scale.
We can build locally so may just do that every-so-often but would be nice to automate this :-)
It would be great if you have any suggestions!
Having the same problem as above after moving from webpack to vite. The build-storybook
command runs fine locally on my laptop with both, and node max_old_space_size
set to 4096. But with vite it fails on CI (we are using Azure DevOps) even with max_old_space_size
set to 32768.
I've done some investigating and found that if I set typescript.reactDocgen
in main.ts
to false
then the problem goes away. But we need the docgen, and also I don't understand why it works fine with webpack but not with the vite builder. And more importantly, why does it work with vite builder locally but not on CI?
It's possible that your github runners themselves do not have sufficient RAM. You may need more powerful boxes.
The reason it happens with vite and not webpack is due to vite using rollup to build. This is the vite issue: https://github.com/vitejs/vite/issues/2433.
After switching from CRA / webpack@5, to vitejs and
storybook-builder-vite
I noticed my storybook takes a lot longer than usual to build. (I was expecting the opposite.)It's not the end of the world of course, but a bigger problem / sideeffect of this is that my Github action that builds storybook and publishes to Chromatic fails with a
JavaScript heap out of memory
error.My storybook build on my local machine (M1 Max) takes 60.05s, here is the log for that:
with CRA / webpack@5 it took 49.49s to build and did not have source map errors 🤔 (maybe that's the culprit)
Here is the output of the same project but with webpack@5 build-storybook
But the main problem is that when I try to build my storybook in a Github action, it runs out of memory, which means I can't use chromatic at all.
This is what my Github action looks like:
and here is the output of running the action:
I tried both with and without https://github.com/IanVS/vite-plugin-turbosnap