[Bug]: Running multiple dev server concurrently with composition results in applications failing at runtime with 404 Not found manager-bundle.js

[Renaud009]

Describe the bug

Currently running multiple dev server at once with concurrently, @storybook/react-vite framework and a composition setup:

• main app: port 6006 with use composition and display components from applications at port 6007 and 6008
  • refs composition is configured and is working
• app 1: port 6007
• app 2: port 6008

When accessing main application at port 6006, it works, all composed components will load as well without issues.

Issue occurs when trying to load port 6007 or 6008, we are seeing a white page and receiving a 404 Not found error on files:

• port 6007: http://localhost:6007/sb-addons/storybook-APP1-10/manager-bundle.js
• port 6008: http://localhost:6008/sb-addons/storybook-APP2-11/manager-bundle.js

Looks like when running multiple dev server concurrently the storybook cache gets overwritten by each app in a shared cache folder at node_modules/.cache/storybook/public/sb-addons. Because, when running the terminals on 3 different repositories everything work fine.

Is there any way to configure the storybook cache folder location per application/configuration or deactivate such cache entirely?

To Reproduce

Package.json

// deps
"@storybook/addon-actions": "^7.4.0",
"@storybook/addon-essentials": "^7.4.0",
"@storybook/addon-interactions": "^7.4.0",
"@storybook/addon-links": "^7.4.0",
"@storybook/addon-viewport": "^7.4.0",
"@storybook/addons": "^7.4.0",
"@storybook/jest": "^0.2.2",
"@storybook/node-logger": "^7.4.0",
"@storybook/preset-create-react-app": "^7.4.0",
"@storybook/react": "^7.4.0",
"@storybook/react-vite": "^7.4.0",
"@storybook/test-runner": "^0.13.0",
"@storybook/testing-library": "^0.2.0",

 // dev server scripts
"start-storybook": "concurrently -k -s first -n \"APP1,APP2,MAIN\" -c \"magenta,blue,green\" \"npm run start-storybook:APP1\" \"npm run start-storybook:APP2\" \"wait-on tcp:6007 && wait-on tcp:6008 && npm run start-storybook:MAIN_APP\"",
"start-storybook:APP1": "storybook dev -c .storybook/apps/app1 -p 6007 --no-open",
"start-storybook:APP2": "storybook dev -c .storybook/apps/app2-p 6008 --no-open",
"start-storybook:MAIN_APP": "storybook dev -c .storybook/apps/main-p 6006 --no-open",

Refs on main application configuration:

refs: (config, { configType }) => {
    if (configType === 'DEVELOPMENT') {
      return {
        'APP1': {
          title: 'APP1',
          url: 'http://localhost:6007',
        },
        'APP2': {
          title: 'APP2',
          url: 'http://localhost:6008',
        },
      };
    }
    return {
      'APP1': {
        title: 'APP1',
        url: 'PROD_URL',
      },
      'APP2': {
        title: 'APP2',
        url: 'PROD_URL',
      },
    };
  },

System

Environment Info:

  System:
    OS: Linux 5.15 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)
    CPU: (10) x64 11th Gen Intel(R) Core(TM) i7-11800H @ 2.30GHz
  Binaries:
    Node: 20.4.0 - ~/.nvm/versions/node/v20.4.0/bin/node
    npm: 9.7.2 - ~/.nvm/versions/node/v20.4.0/bin/npm
  npmPackages:
    @storybook/addon-actions: ^7.4.0 => 7.4.0 
    @storybook/addon-essentials: ^7.4.0 => 7.4.0 
    @storybook/addon-interactions: ^7.4.0 => 7.4.0 
    @storybook/addon-links: ^7.4.0 => 7.4.0 
    @storybook/addon-viewport: ^7.4.0 => 7.4.0 
    @storybook/addons: ^7.4.0 => 7.4.0 
    @storybook/jest: ^0.2.2 => 0.2.2 
    @storybook/node-logger: ^7.4.0 => 7.4.0 
    @storybook/preset-create-react-app: ^7.4.0 => 7.4.0 
    @storybook/react: ^7.4.0 => 7.4.0 
    @storybook/react-vite: ^7.4.0 => 7.4.0 
    @storybook/test-runner: ^0.13.0 => 0.13.0 
    @storybook/testing-library: ^0.2.0 => 0.2.0

Additional context

No response

[rmachado-studocu]

We're having the same issue in our monorepo (although we use Nx for that purpose).
So far, thanks to some debugging of the @storybook/build-manager in the node_modules I was able to see that we can in fact configure the outputDir.

For your case @Renaud009 , I believe that you can solve that by setting the -o <path> parameter on the CLI for each project that should be in a different path, with ... well.. a different output directory...

In our case we basically set each output directory to something like:

theme: node_modules/.cache/storybook/theme
app: node_modules/.cache/storybook/app <--being this one the main app that references the theme...

I hope it helps! 👍

[Renaud009]

We're having the same issue in our monorepo (although we use Nx for that purpose). So far, thanks to some debugging of the @storybook/build-manager in the node_modules I was able to see that we can in fact configure the outputDir.

For your case @Renaud009 , I believe that you can solve that by setting the -o <path> parameter on the CLI for each project that should be in a different path, with ... well.. a different output directory...

In our case we basically set each output directory to something like:

theme: node_modules/.cache/storybook/theme app: node_modules/.cache/storybook/app <--being this one the main app that references the theme...

I hope it helps! 👍

Thanks for your quick answer but the storybook dev cli has no such options exposed unlike the build cli.
I want to use the dev server so it can update changes in real-time.

Usage: storybook dev [options]

Options:
  --disable-telemetry               disable sending telemetry data
  --debug                           Get more logs in debug mode (default: false)
  --enable-crash-reports            enable sending crash reports to telemetry data
  -p, --port <number>               Port to run Storybook
  -h, --host <string>               Host to run Storybook
  -s, --static-dir <dir-names>      Directory where to load static files from
  -c, --config-dir <dir-name>       Directory where to load Storybook configurations from
  --https                           Serve Storybook over HTTPS. Note: You must provide your own certificate information.
  --ssl-ca <ca>                     Provide an SSL certificate authority. (Optional with --https, required if using a self-signed certificate)
  --ssl-cert <cert>                 Provide an SSL certificate. (Required with --https)
  --ssl-key <key>                   Provide an SSL key. (Required with --https)
  --smoke-test                      Exit after successful start
  --ci                              CI mode (skip interactive prompts, don't open browser)
  --no-open                         Do not open Storybook automatically in the browser
  --loglevel <level>                Control level of logging during build
  --quiet                           Suppress verbose build output
  --no-version-updates              Suppress update check
  --debug-webpack                   Display final webpack configurations for debugging purposes
  --webpack-stats-json [directory]  Write Webpack Stats JSON to disk
  --preview-url <string>            Disables the default storybook preview and lets your use your own
  --force-build-preview             Build the preview iframe even if you are using --preview-url
  --docs                            Build a documentation-only site using addon-docs
  --initial-path [path]             URL path to be appended when visiting Storybook for the first time
  --help                            display help for command

[rmachado-studocu]

Hmmm ok, indeed we're not using storybook dev's command.
I wonder if it'd be possible to configure that via storybook config like:

{
    core: {
        builder: {
            name: '@storybook/builder-webpack5',
            options: {
                outputDir: '<path>'
            } as BuilderOptions
        },
    },
}

[Tallyb]

We experience the same. It seems like the problem results from the shared cache between multiple storybooks. An option to specify different cache per dev server should solve the issue.

[domneo]

Facing the same issue with @storybook/web-components-vite and @storybook/angular. Naturally, removing manager.ts allows the page to load.

[Tallyb]

Disabling HMR with devServer: { hot: false } "solved" it. A fix would be great. not even sure if it is core or plugin.

[mahikazversal]

@shilman
Sorry, but I have a doubt that is it the same thing as the component not working on nx run command..?
If anybody could help!