[Bug]: ENAMETOOLONG with deeply nested folder structure in storybook/next
#30221 opened on Jan 9, 2025
Description
Describe the bug
If you have a folder structure with long names that is deeply nested, it's possible to overrun the OS's maximum file length as there is no built in truncation
You should then see an issue like
=> Failed to build the preview
SB_BUILDER-WEBPACK5_0002 (WebpackInvocationError): ENAMETOOLONG: name too long, open './storybook-static/app-some-folder2-some-sub-folder-some-sub-sub-folder-some-sub-sub-sub-folder-some-sub-sub-sub-sub-folder-some-sub-sub-sub-sub-sub-folder-some-sub-sub-sub-sub-sub-sub-folder-something_is_going_to_get_cha-SomeComponent-AComponent-stories.a38fd5fb.iframe.bundle.js'
This error is because the file name being written to the disk is too long and the OS rejects it. It appears as though the config is using a concatenation of the entire chunk file name and path to create the output file name. This error doesn't happen in standard webpack or in next.js, they have a maxlength for the filename and truncate it.
webpack for example
dist/src_some-folder_some-sub-folder_some-sub-sub-folder_some-sub-sub-sub-folder_some-sub-sub-sub--921ea3.js
next.js for example
.next/static/chunks/9e8ad_something_is_going_to_get_cha_SomeComponent_AComponent_tsx_2394de._.js
it is possible to work around this issue by manually setting the webpack config output.filename to not include the [name] param.
Reproduction link
https://github.com/diffidentDude/next-test
Reproduction steps
I have created a repo to repro the issue https://github.com/diffidentDude/next-test
System
% npx storybook@latest info
npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm warn deprecated rimraf@2.6.3: Rimraf versions prior to v4 are no longer supported
Storybook Environment Info:
System:
OS: macOS 14.7
CPU: (10) arm64 Apple M1 Pro
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.14.0 - ~/Code/next-test/.devbox/nix/profile/default/bin/node
npm: 10.7.0 - ~/Code/next-test/.devbox/nix/profile/default/bin/npm <----- active
pnpm: 9.11.0 - ~/Code/next-test/.devbox/virtenv/nodejs/corepack-bin/pnpm
Browsers:
Chrome: 131.0.6778.205
Safari: 18.0
npmPackages:
@storybook/addon-essentials: ^8.4.7 => 8.4.7
@storybook/addon-interactions: ^8.4.7 => 8.4.7
@storybook/addon-onboarding: ^8.4.7 => 8.4.7
@storybook/blocks: ^8.4.7 => 8.4.7
@storybook/nextjs: ^8.4.7 => 8.4.7
@storybook/react: ^8.4.7 => 8.4.7
@storybook/test: ^8.4.7 => 8.4.7
eslint-plugin-storybook: ^0.11.2 => 0.11.2
storybook: ^8.4.7 => 8.4.7
Additional context
No response