Storybook w/ Typescript takes ~2 minutes to load a story. #10784
Comments
|
Did you try the preset? https://storybook.js.org/docs/configurations/typescript-config/#typescript-configuration-presets |
|
Thanks for the quick response. I tried with just the default preset and nothing else, and it's a little better. It now takes ~1.5 minutes instead. of 2-3. minutes. But looking at the logs it still spends the vast majority of the time compiling node_modules I don't use in my stories. The longest time is spent loading Is there any way to exclude libraries I don't need to load in my storybook?
|
|
It shouldn't be processing node_modules at all... 🤔 |
|
@shilman Glad to hear that it's not supposed to do that! From the logs it looks like it's the type checking. Before it starts building node_modules it logs "Starting type checking service..." After building all the node_modules it logs "No type errors found" So looks like it's typescript building all this stuff? But my tsconfig (pasted above) have node_modules excluded as well 🤷♂️ |
|
Even if I remove the Although it might just be picking up the project level tsconfig.json instead |
|
There is no |
|
It's about half the loading time with the preset, so I'll take that as a win for now, and check back when the typescript support is updated to see if there's any updates :) Thanks for the help! |
|
We've just released zero-config typescript support in 6.0-beta. Please upgrade and test it! Thanks for your help and support getting this stable for release! |
|
@shilman thanks for the update! I updated to 6.0.0-beta.12 (& updated my configs to the new main.js & preview.js files). I removed the typescript-preset mentioned earlier in this thread as there was an error it already existed. However, it's still building all of my node_modules every time, and it still takes 1-2 minutes to load. (actually seems a bit slower now)
|
|
@MarkLyck the speed difference is probably due to i don't understand why it's so slow. do you have a repro repo you can share? |
|
@shilman it's a private repo, but I'll invite you as a temporary collab so you can see it. Or if needed I can try to create a dummy repo to reproduce, but not sure how long that will take. The branch for storybook 6 is https://github.com/MarkLyck/weeklystocktip/tree/storybook6 only setup needed is There is a custom webpack in there to load .less files for antd theming. But it takes just a long to load without it. I can make a branch without this if that helps. |
|
Thanks @MarkLyck i've cloned the repo and will delete it when I'm done with this. Feel free to remove me as a collaborator. I played with the settings in typescript: {
reactDocgen: 'react-docgen',
},Values on my machine:
For now, I think switching the default is about as good as it's going to get. We'll do a performance release later this year where we should be able to get this number down a lot. Next.js will be releasing their own preset soon, and perhaps they can also provide some Next.js-specific optimizations. |
|
@shilman Thank you! Can confirm with much better build times. But I'm guessing with this method I won't get the TypeScript types for automated documentation? something I was hoping to implement when @6 is stable. So it is next.js that's causing the slow storybook build times? P.S. looking forward to the performance release later this year! You guys are doing an awesome job thank you so much for working on this tool! EDIT also made it slightly faster by removing all icons from @ant-design/icons and only just FontAwesome icons in my project. (something I wanted to do anyway). Now it's down to 20-25 seconds for the manager and 40-45 seconds for the preview. |
|
Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks! |
|
If you switched from Here are the numbers I'm seeing for
|
|
Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks! |
|
I'm in the same situation with |
|
@shilman Thanks. I'll subscribe that issue. |
|
Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks! |
|
@MarkLyck Hey. I'm stuck on a similar issue. Did you find any solution? I got rid of react-docgen and withInfo decorator but it still, for some reason, builds node_modules. |
|
Same problem here: It builds node modules for ages. |
|
@Obiwarn sounds like a configuration problem. do you have a repro you can share? |
|
@shilman I also have the same problem, storybook builds node modules folder, here's my const path = require('path');
module.exports = {
stories: ['../src/**/*.stories.@(js|tsx|md|mdx)', '../src/**/stories.@(js|tsx|md|mdx)'],
test: /\.(ts|tsx)$/,
typescript: {
check: true,
reactDocgen: 'react-docgen-typescript',
},
addons: [
'@storybook/addon-actions',
'@storybook/addon-knobs',
'@storybook/addon-links',
'@storybook/addon-viewport',
'@storybook/addon-docs',
'@storybook/preset-create-react-app',
],
exclude: [/node_modules/, '/src/**/*/*.test.ts', '/src/**/*/*.test.tsx'],
webpackFinal: async config => {
config.resolve.modules = [path.resolve(__dirname, '../src/'), 'node_modules'];
return config;
},
};
|
|
Cc @mrmckeb |
|
@shilman On Regular build is 19s and debug build in Webstorm over 3 min!
Debug:
|
|
Debug means running it in the webstorm debugger? The first numbers look "normal". We're optimizing away the manager build entirely in 6.1-beta (available with The second set of numbers look crazy. I guess I'd recommend not running it in debug mode? |
|
Debug mode is to go through the code step by step with the debugger. It is a blessing. We use it a lot. So the compilation of the node_modules is intentional? |
Same here, running npx create-react-app my-app
cd my-app
npx sb init
npm run storybooktakes I mean it's a reasonable time, what looks weird to me is that the build goes through the node_modules folder. |
|
Another thing to check (a co-worker ran into this issue) is try running storybook in "quiet" mode, this reduces the amount of text it prints to the terminal. Co-worker had multi-minute builds, and after using quiet mode it matched my build times of < 1min.
|
|
Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks! |
|
Im getting this issue too. Surely if an empty project made with CRA can expose this (as per @Obiwarn 's comment) - it should be repro'able? we are just switching config/setup for sb and experiencing it. I actually get a whole lot of ts errors in the node_modules: hmm |
I can confirm this (Typescript Monorepo Project for UI Components). I'm on macOS Mojave - maybe that's somehow helping. |
In the end it boils down to the webpack configuration being used. If is it as trivial as I described? |
|
I am also confirming this issue exist, node_modules needs to be excluded from the build. Issue reproducible with Lerna monorepo. |
I have the same problem。lerna monorepo, build time cost 3mins。I added 'exclude' in webpack.config.js and tsconfig.json，but not work。I dont' know how to locate the problem。 i have my packages like this:
I run npx start-storybook in directory 'a', cost 1min。when i run that command at directory -- 'all', cost 3 mins。 |
|
@orange727 Add this to storybook config e.g. in |
|
Can confirm that by turning off reactDocgen in main.js, per @karol-f's comment (thanks!), it cut my storybook build time by quite a bit. I don't need docgen right now while I'm in early development, so this is perfect! Before:
After:
|
|
Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks! |
|
I was facing the same problem, but my OS is Windows. I change my project from Windows filesystem to Linux filesystem(using WSL2) and it improve a lot the time to load a story and also hot reload. |
|
Can you try out the following canary in your project and let me know whether it resolves any of your issues (or generates new ones)? We're looking to switch the default docgen from Note that the change is currently only for Vite projects. Instructions in the "how to test" section: 👉 #23825 |
|
@shilman I am having the same issue ( 2 minute startup time ) which I can confirm goes away if I set Browser:Console |
|
Hi there! Thank you for opening this issue, but it has been marked as |
|
I'm afraid we need to close this issue for now, since we can't take any action without the requested reproduction or additional information. But please don't hesitate to open a new issue if the problem persists – we're always happy to help. Thanks so much for your understanding. |
Describe the bug
A clear and concise description of what the bug is.
The initial load of storybook takes about 2 minutes to load when using Typescript.
When not using Typescript it takes a few seconds.
Code changes also takes a very long time to reflect in the story.
My guess is that it doesn't exclude node_modules correctly.
To Reproduce
Steps to reproduce the behavior:
yarn start-storybook -s ./public -c .storybook -p 9001 --ciExpected behavior
It should load about as fast as it does with pure JS.
It should not need to compile node_modules
Screenshots
Code snippets
If applicable, add code samples to help explain your problem.
webpack.config.js
tsconfig.json
As far as I can tell from any docs or similar problems, this should exclude node_modules correctly.
System:
System:
OS: macOS 10.15.4
CPU: (8) x64 Intel(R) Core(TM) i7-6920HQ CPU @ 2.90GHz
Binaries:
Node: 12.12.0 - /usr/local/bin/node
Yarn: 1.17.3 - /usr/local/bin/yarn
npm: 6.14.4 - /usr/local/bin/npm
Browsers:
Chrome: 81.0.4044.138
Firefox: 70.0.1
Safari: 13.1
npmPackages:
@storybook/addon-a11y: ^5.3.18 => 5.3.18
@storybook/addon-actions: ^5.3.18 => 5.3.18
@storybook/addon-info: ^5.3.18 => 5.3.18
@storybook/addon-knobs: ^5.3.18 => 5.3.18
@storybook/addon-links: ^5.3.18 => 5.3.18
@storybook/addon-storysource: ^5.3.18 => 5.3.18
@storybook/addon-viewport: ^5.3.18 => 5.3.18
@storybook/react: ^5.3.18 => 5.3.18
The text was updated successfully, but these errors were encountered: