[Bug]: ENAMETOOLONG with deeply nested folder structure in storybook/next

[diffidentDude]

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 [email protected]: 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 [email protected]: Glob versions prior to v9 are no longer supported
npm warn deprecated [email protected]: 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