Open philjones88 opened 2 years ago
It looks like something in the manager is breaking. Do you know if anything you're using depends on having webpack 5? The vite builder uses webpack 4 to build the manager, so maybe when you converted over, something started to break. Do you have a .storybook/manager.js
file?
@IanVS thanks for the reply. We used to use webpack 5 for storybook. searching our yarn.lock
file I can:
"@storybook/builder-webpack4@6.5.9"
"webpack@4":
"webpack@>=4.43.0 <6.0.0":
we have no hard webpack
entry in our package.json
file.
No. We don't have a manager.js
file.
Maybe you can tey removing imports from your privew.jsx file one at a time and find which one is causing the error?
Oh, also did you remove your node_modules and install fresh? Or at least remove the node_modules/.cache
It does seem to be intermitent, almost like it's a caching issue, when it has been happening, removing node_modules
doesn't seem to fix it. there might be a cache elsewhere?
Not other than the browser cache. Have you tried in an incognito window, just as a shot in the dark?
I'd also suggest removing this from your config, in case it's removing parts of the config that the vite builder is adding (though I think mergeConfig is smart enough not to:
plugins: [],
server: {
hmr: {},
},
Finally, the only other thing I can think to suggest is to start simplifying the config step by step. Maybe try removing addons like storybook-formik/register
for instance, and see if that makes a difference. You can run storybook with --no-manager-cache
to be sure the webpack cache is cleared before each run, though it should clear on its own when you change config files.
Hmm. Hit it today after upgrading to Vite 3.0.0 and the 0.2.0 of this lib.So node_modules would have changed I guess as I updated packages.
Cancelled Storybook, added --no-manager-cache
so yarn storybook --no-manager-cache
and it then works.
Seems to solve it...
I'm having the exact same issue. Usually happens when I run it for the first time after a while. And when I run storybook again, it works as it should. Tried
Hmm. Hit it today after upgrading to Vite 3.0.0 and the 0.2.0 of this lib.So node_modules would have changed I guess as I updated packages.
Cancelled Storybook, added
--no-manager-cache
soyarn storybook --no-manager-cache
and it then works.Seems to solve it...
But still the error happens.
This seems to occasionally happen when vite hasn't pre-bundled its dependencies. It was better for a while when using 2.9, but it seems to be an issue again in 3.0. @nagisaando @philjones88 when you see this happen, do you also see messages in the terminal about vite finding and optimizing dependencies? If so, you can try adding those to optimizeDeps.include
in your config in viteFinal
. For example:
const { mergeConfig } = require('vite');
module.exports = {
//...
async viteFinal(config, { configType }) {
return mergeConfig(config, {
optimizeDeps: {
include: [
'@storybook/addon-a11y/preview.js',
'@storybook/addon-actions/preview.js',
'@storybook/addon-backgrounds/preview.js',
'babel-plugin-open-source/script.js',
'chromatic/isChromatic',
'storybook-dark-mode',
],
},
});
},
};
It has just happened again to me, the full log of running it:
➜ yarn storybook
yarn run v1.22.18
$ start-storybook -p 6006
info @storybook/react v6.5.9
info
info => Loading presets
info Found existing addon "@storybook/addon-actions", skipping.
info => Serving static files from ././public at /
info => Ignoring cached manager due to change in manager config
ℹ 「wdm」: wait until bundle finished:
ℹ 「wdm」: Hash: 9c4937db33d68ebb42cf
Version: webpack 4.46.0
Time: 6895ms
Built at: 07/26/2022 9:45:00 AM
Asset Size Chunks Chunk Names
0.manager.bundle.js 224 KiB 0 [emitted]
1.manager.bundle.js 128 KiB 1 [emitted]
2.manager.bundle.js 891 KiB 2 [emitted] [big]
3.manager.bundle.js 83.9 KiB 3 [emitted]
4.manager.bundle.js 15.8 KiB 4 [emitted]
5.manager.bundle.js 295 KiB 5 [emitted] [big]
6.manager.bundle.js 1.36 KiB 6 [emitted]
index.html 4.01 KiB [emitted]
main.manager.bundle.js 4.88 KiB main [emitted] main
runtime~main.manager.bundle.js 8.95 KiB runtime~main [emitted] runtime~main
vendors~main.manager.bundle.js 4.82 MiB vendors~main [emitted] [big] vendors~main
Entrypoint main [big] = runtime~main.manager.bundle.js vendors~main.manager.bundle.js main.manager.bundle.js
[0] multi ./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-client/dist/esm/manager/index.js ./node_modules/@storybook/addon-actions/manager.js ./node_modules/@storybook/addon-links/manager.js ./node_modules/@storybook/addon-docs/manager.js ./node_modules/@storybook/addon-controls/manager.js ./node_modules/@storybook/addon-backgrounds/manager.js ./node_modules/@storybook/addon-viewport/manager.js ./node_modules/@storybook/addon-toolbars/manager.js ./node_modules/@storybook/addon-measure/manager.js ./node_modules/@storybook/addon-outline/manager.js ./node_modules/storybook-formik/register.js ./node_modules/storybook-i18n/manager.js 172 bytes {main} [built]
[./node_modules/@storybook/addon-actions/manager.js] ./node_modules/@storybook/addon-actions/manager.js + 16 modules 222 KiB {vendors~main} [built]
| ./node_modules/@storybook/addon-actions/manager.js 29 bytes [built]
| ./node_modules/@storybook/addon-actions/dist/esm/manager.js 3.42 KiB [built]
| ./node_modules/@storybook/addon-actions/dist/esm/containers/ActionLogger/index.js 7.4 KiB [built]
| ./node_modules/@storybook/addon-actions/dist/esm/components/ActionLogger/index.js 2.97 KiB [built]
| ./node_modules/react-inspector/dist/es/react-inspector.js 81.7 KiB [built]
| ./node_modules/@storybook/addon-actions/dist/esm/components/ActionLogger/style.js 793 bytes [built]
| ./node_modules/polished/dist/polished.esm.js 122 KiB [built]
| ./node_modules/@babel/runtime/helpers/esm/extends.js 418 bytes [built]
| ./node_modules/@babel/runtime/helpers/esm/assertThisInitialized.js 192 bytes [built]
| ./node_modules/@babel/runtime/helpers/esm/inheritsLoose.js 259 bytes [built]
| ./node_modules/@babel/runtime/helpers/esm/wrapNativeSuper.js 1.06 KiB [built]
| ./node_modules/@babel/runtime/helpers/esm/taggedTemplateLiteralLoose.js 155 bytes [built]
| ./node_modules/@babel/runtime/helpers/esm/setPrototypeOf.js 229 bytes [built]
| ./node_modules/@babel/runtime/helpers/esm/getPrototypeOf.js 237 bytes [built]
| ./node_modules/@babel/runtime/helpers/esm/isNativeFunction.js 118 bytes [built]
| + 2 hidden modules
[./node_modules/@storybook/addon-backgrounds/manager.js] ./node_modules/@storybook/addon-backgrounds/manager.js + 6 modules 15.2 KiB {vendors~main} [built]
| ./node_modules/@storybook/addon-backgrounds/manager.js 29 bytes [built]
| ./node_modules/@storybook/addon-backgrounds/dist/esm/manager.js 826 bytes [built]
| ./node_modules/@storybook/addon-backgrounds/dist/esm/constants.js 185 bytes [built]
| ./node_modules/@storybook/addon-backgrounds/dist/esm/containers/BackgroundSelector.js 6.55 KiB [built]
| ./node_modules/@storybook/addon-backgrounds/dist/esm/containers/GridSelector.js 3.51 KiB [built]
| ./node_modules/@storybook/addon-backgrounds/dist/esm/components/ColorIcon.js 399 bytes [built]
| ./node_modules/@storybook/addon-backgrounds/dist/esm/helpers/index.js 3.57 KiB [built]
[./node_modules/@storybook/addon-controls/manager.js] ./node_modules/@storybook/addon-controls/manager.js + 3 modules 6 KiB {vendors~main} [built]
| ./node_modules/@storybook/addon-controls/manager.js 29 bytes [built]
| ./node_modules/@storybook/addon-controls/dist/esm/manager.js 1.23 KiB [built]
| ./node_modules/@storybook/addon-controls/dist/esm/constants.js 74 bytes [built]
| ./node_modules/@storybook/addon-controls/dist/esm/ControlsPanel.js 4.57 KiB [built]
[./node_modules/@storybook/addon-docs/manager.js] ./node_modules/@storybook/addon-docs/manager.js + 2 modules 1.02 KiB {vendors~main} [built]
| ./node_modules/@storybook/addon-docs/manager.js 29 bytes [built]
| ./node_modules/@storybook/addon-docs/dist/esm/manager.js 625 bytes [built]
| ./node_modules/@storybook/addon-docs/dist/esm/shared.js 380 bytes [built]
[./node_modules/@storybook/addon-links/manager.js] ./node_modules/@storybook/addon-links/manager.js + 2 modules 662 bytes {vendors~main} [built]
| ./node_modules/@storybook/addon-links/manager.js 29 bytes [built]
| ./node_modules/@storybook/addon-links/dist/esm/manager.js 398 bytes [built]
| ./node_modules/@storybook/addon-links/dist/esm/constants.js 225 bytes [built]
[./node_modules/@storybook/addon-measure/manager.js] ./node_modules/@storybook/addon-measure/manager.js + 3 modules 3.99 KiB {vendors~main} [built]
| ./node_modules/@storybook/addon-measure/manager.js 29 bytes [built]
| ./node_modules/@storybook/addon-measure/dist/esm/manager.js 484 bytes [built]
| ./node_modules/@storybook/addon-measure/dist/esm/constants.js 290 bytes [built]
| ./node_modules/@storybook/addon-measure/dist/esm/Tool.js 3.12 KiB [built]
[./node_modules/@storybook/addon-outline/manager.js] ./node_modules/@storybook/addon-outline/manager.js + 3 modules 4.15 KiB {vendors~main} [built]
| ./node_modules/@storybook/addon-outline/manager.js 29 bytes [built]
| ./node_modules/@storybook/addon-outline/dist/esm/manager.js 626 bytes [built]
| ./node_modules/@storybook/addon-outline/dist/esm/constants.js 76 bytes [built]
| ./node_modules/@storybook/addon-outline/dist/esm/OutlineSelector.js 3.35 KiB [built]
[./node_modules/@storybook/addon-toolbars/manager.js] ./node_modules/@storybook/addon-toolbars/manager.js + 11 modules 19 KiB {vendors~main} [built]
| ./node_modules/@storybook/addon-toolbars/manager.js 29 bytes [built]
| ./node_modules/@storybook/addon-toolbars/dist/esm/manager.js 467 bytes [built]
| ./node_modules/@storybook/addon-toolbars/dist/esm/constants.js 76 bytes [built]
| ./node_modules/@storybook/addon-toolbars/dist/esm/components/ToolbarManager.js 1.44 KiB [built]
| ./node_modules/@storybook/addon-toolbars/dist/esm/components/ToolbarMenuList.js 4.99 KiB [built]
| ./node_modules/@storybook/addon-toolbars/dist/esm/utils/normalize-toolbar-arg-type.js 1.05 KiB [built]
| ./node_modules/@storybook/addon-toolbars/dist/esm/components/ToolbarMenuButton.js 625 bytes [built]
| ./node_modules/@storybook/addon-toolbars/dist/esm/hoc/withKeyboardCycle.js 5.09 KiB [built]
| ./node_modules/@storybook/addon-toolbars/dist/esm/utils/get-selected.js 1000 bytes [built]
| ./node_modules/@storybook/addon-toolbars/dist/esm/components/ToolbarMenuListItem.js 979 bytes [built]
| ./node_modules/@storybook/addon-toolbars/dist/esm/utils/create-cycle-value-array.js 573 bytes [built]
| ./node_modules/@storybook/addon-toolbars/dist/esm/utils/register-shortcuts.js 2.69 KiB [built]
[./node_modules/@storybook/addon-viewport/manager.js] ./node_modules/@storybook/addon-viewport/manager.js + 5 modules 18.8 KiB {vendors~main} [built]
| ./node_modules/@storybook/addon-viewport/manager.js 29 bytes [built]
| ./node_modules/@storybook/addon-viewport/dist/esm/manager.js 514 bytes [built]
| ./node_modules/@storybook/addon-viewport/dist/esm/constants.js 316 bytes [built]
| ./node_modules/@storybook/addon-viewport/dist/esm/Tool.js 11 KiB [built]
| ./node_modules/@storybook/addon-viewport/dist/esm/shortcuts.js 3.81 KiB [built]
| ./node_modules/@storybook/addon-viewport/dist/esm/defaults.js 2.98 KiB [built]
[./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js] 97 bytes {vendors~main} [built]
[./node_modules/@storybook/core-client/dist/esm/manager/index.js] ./node_modules/@storybook/core-client/dist/esm/manager/index.js + 4 modules 22.9 KiB {vendors~main} [built]
| ./node_modules/@storybook/core-client/dist/esm/manager/index.js 335 bytes [built]
| ./node_modules/@storybook/core-client/dist/esm/manager/provider.js 5.17 KiB [built]
| ./node_modules/@storybook/core-client/dist/esm/manager/conditional-polyfills.js 762 bytes [built]
| ./node_modules/@storybook/channel-postmessage/dist/esm/index.js 13.2 KiB [built]
| ./node_modules/@storybook/channel-websocket/dist/esm/index.js 3.26 KiB [built]
[./node_modules/@storybook/ui/dist/esm/index.js] 498 KiB {vendors~main} [built]
[./node_modules/storybook-formik/register.js] 32 bytes {vendors~main} [built]
[./node_modules/storybook-i18n/manager.js] 55 bytes {vendors~main} [built]
+ 981 hidden modules
Child HtmlWebpackCompiler:
Asset Size Chunks Chunk Names
__child-HtmlWebpackPlugin_0 6.31 KiB HtmlWebpackPlugin_0 HtmlWebpackPlugin_0
Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
[./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core-common/templates/index.ejs] 2.03 KiB {HtmlWebpackPlugin_0} [built]
ℹ 「wdm」: Compiled successfully.
╭────────────────────────────────────────────────╮
│ │
│ Storybook 6.5.9 for React started │
│ 23 s for manager and 19 s for preview │
│ │
│ Local: http://localhost:6006/ │
│ On your network: http://10.0.0.75:6006/ │
│ │
╰────────────────────────────────────────────────╯
9:45:20 AM [vite] ✨ new dependencies optimized: @mui/x-license-pro, mockdate, i18next-browser-languagedetector, i18next-http-backend
9:45:20 AM [vite] ✨ optimized dependencies changed. reloading
That optimized dependencies changed, reloading
is the last line it ever prints
@philjones88 try adding those deps to your optimizeDeps.include. That should help avoid this error.
@IanVS Hey thanks! I added dependencies to optimizeDeps.include and it's working so far. My project uses vite 2.9.9 so the issue may be occurring in the both versions.
I also encounter this issue every time the terminal says "new dependencies optimized"
Me too!
The issue occurred for the first time for me when upgrading from 0.1.39
to 0.2.2
The issue occurred for the first time for me when upgrading from 0.1.39 to 0.2.2
Did you also upgrade Vite? Vite has been changing the way that prebundling works through the last few versions, and it seems like maybe one of those changes is causing some problems for storybook.
@gabstafari @blowsie have you tried adding those dependencies to your optimizeDeps.include
?
The issue occurred for the first time for me when upgrading from 0.1.39 to 0.2.2
Did you also upgrade Vite? Vite has been changing the way that prebundling works through the last few versions, and it seems like maybe one of those changes is causing some problems for storybook.
@gabstafari @blowsie have you tried adding those dependencies to your
optimizeDeps.include
?
Hi @IanVS it seems fine now.
I just made sure that I got all the packages I need so here are the list of packages I have to include.
"@storybook/addon-actions": "^6.5.9",
"@storybook/addon-docs": "^6.5.9",
"@storybook/addon-essentials": "^6.5.9",
"@storybook/addon-interactions": "^6.5.9",
"@storybook/addon-links": "^6.5.9",
"@storybook/addon-postcss": "3.0.0-alpha.1",
"@storybook/addons": "^6.5.9",
"@storybook/builder-vite": "^0.2.2",
"@storybook/testing-library": "^0.0.13",
"@storybook/theming": "^6.5.9",
I am still making more test and will let you know if I encountered any more issues.
Thanks for your hard work on this great storybook builder. :)
Just to give an update on my issue, I ended up reverting back to storybook 6.4.22 and vite-builder to 0.1.33 The issues are gone.
@gabstafari you were seeing this problem after adding to optimizeDeps.include?
@gabstafari you were seeing this problem after adding to optimizeDeps.include?
Hi @IanVS happy weekend!
No. I got error even before adding to optimizeDeps.include. I'm not sure why. Maybe because I made a wrong configuration.
Experiencing the same. I've added all dependencies to the the optimizeDeps.include
- same issue
@chuck-adaptive this can often indicate an error with your preview.js
or some other problem with bundling your files. Do you see any error messages in the terminal where you started storybook? What versions of storybook and builder-vite are you using? If you're not seeing any other error messages, can you create a reproduction or share a link to your project if it is open source?
Unfortunately my project is no open source.
I see no other errors in my terminal. The build passes and the error triggers only when I select a story.
Downgrading my storybook & vite builder is showing me the same. I will try and create a repro and update you if I resolve it.
After adding optimizeDeps.include
with all the dependencies in new dependencies optimized:
it worked for me.
This seems to occasionally happen when vite hasn't pre-bundled its dependencies. It was better for a while when using 2.9, but it seems to be an issue again in 3.0. @nagisaando @philjones88 when you see this happen, do you also see messages in the terminal about vite finding and optimizing dependencies? If so, you can try adding those to
optimizeDeps.include
in your config inviteFinal
. For example:const { mergeConfig } = require('vite'); module.exports = { //... async viteFinal(config, { configType }) { return mergeConfig(config, { optimizeDeps: { include: [ '@storybook/addon-a11y/preview.js', '@storybook/addon-actions/preview.js', '@storybook/addon-backgrounds/preview.js', 'babel-plugin-open-source/script.js', 'chromatic/isChromatic', 'storybook-dark-mode', ], }, }); }, };
Thank you so much, you saved me days of debugging.
I started facing this 504 error after cloning my Laravel inertia project to my new macbook ..... it's been very frustrating as i have no clue what could be the problem.
For what it's worth, I ran into this issue and a simple rm -rf node_modules/ && yarn upgrade
fixed it for me :)
For what it's worth, I ran into this issue and a simple
rm -rf node_modules/ && yarn upgrade
fixed it for me :)
Yep, fixed here too. Thanks!
What version of
vite
are you using?2.9.14
System info and storybook versions
Storybook Addons:
Describe the Bug
We use Storybook + Chromatic.
We have swapped from Webpack 5 builer to Vite as we swapped from CRA to Vite for the app itself.
Chromatic seems to work most of the time but locally we just hit:
In the browser console we see this:
and Storybook just shows
error loading dynamically imported module
main.js
preview.jsx
Link to Minimal Reproducible Example
No response
Participation