Running a new storybook breaks the other one

samhecquet-divido commented 1 year ago

Current Behavior

I can't have 2 Storybook running at the same time since I upgraded Storybook from 6.4.22 to 7.4.0

As soon as one storybook compiles (either by updating a file or just starting a new one), the other one will stop working because file http://localhost:XXX/runtime_main.xxx.hot-update.json now throws a 404 error.

I tried a hack where I "hardcoded" the filename for each storybook by adding this to both /.storybook/main.js config files:

// libs/calculator/.storybook/main.js
webpackFinal: async (config) => {
    return {
      ...config,
      output: {
        ...config.output,
        filename: 'lib.[name].iframe.bundle.js', // and 'app.[name].iframe.bundle.js' for `apps/calculator/.storybook/main.js`
      },
    };
},

For example if libs/calculator is running, it's consuming these files:

And as soon as apps/calculator compiles, if I reload the page for the other storybook (libs/calculator), it will start consuming the files starting by app. instead. BUT it's still using the correct port: 4400.

Expected Behavior

Each Storybook should be able to run at the same time as it as before.

GitHub Repo

No response

Steps to Reproduce

Sorry, my repo is private so hopefully these files will help you. Let me know if you need more information.

apps/calculator:

// apps/calculator/.storybook/main.js
module.exports = {
  stories: ['../src/app/*.stories.@(js|jsx|ts|tsx)'],
  addons: [],

  framework: {
    name: '@storybook/nextjs',
    options: {},
  },
};

// apps/calculator/project.json
// ....
"storybook": {
  "executor": "@nx/storybook:storybook",
  "options": {
    "port": 4440,
    "configDir": "apps/calculator/.storybook"
  },
  "configurations": {
    "ci": {
      "quiet": true
    }
  }
},
"build-storybook": {
  "executor": "@nx/storybook:build",
  "outputs": ["{options.outputDir}"],
  "options": {
    "configDir": "apps/calculator/.storybook",
    "outputDir": "dist/storybook/calculator"
  },
  "configurations": {
    "ci": {
      "quiet": true
    }
  }
},
// ...

// apps/calculator/tsconfig.storybook.json
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "outDir": ""
  },
  "files": [
    "../../node_modules/@nx/react/typings/styled-jsx.d.ts",
    "../../node_modules/@nx/react/typings/cssmodule.d.ts",
    "../../node_modules/@nx/react/typings/image.d.ts"
  ],
  "exclude": [
    "src/**/*.spec.ts",
    "src/**/*.spec.js",
    "src/**/*.spec.tsx",
    "src/**/*.spec.jsx",
    "jest.config.ts"
  ],
  "include": ["src/*", ".storybook/*.js"]
}

libs/calculator:

// libs/calculator/.storybook/main.js
module.exports = {
  addons: [],
  stories: [
    '../src/lib/**/*.stories.@(js|jsx|ts|tsx)',
    '../src/lib/**/**/*.stories.@(js|jsx|ts|tsx)',
  ],
  staticDirs: ['public'],
  framework: {
    name: '@storybook/nextjs',
    options: {},
  },
};

// libs/calculator/project.json
// ....
"storybook": {
  "executor": "@nx/storybook:storybook",
  "options": {
    "port": 4400,
    "configDir": "libs/calculator/.storybook"
  },
  "configurations": {
    "ci": {
      "quiet": true
    }
  }
},
"build-storybook": {
  "executor": "@nx/storybook:build",
  "outputs": ["{options.outputDir}"],
  "options": {
    "staticDir": ["libs/calculator/.storybook/public"],
    "configDir": "libs/calculator/.storybook",
    "outputDir": "dist/storybook/calculator"
  },
  "configurations": {
    "ci": {
      "quiet": true
    }
  }
},
// ...

// libs/calculator/tsconfig.storybook.json
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "emitDecoratorMetadata": true
  },
  "files": [
    "../../node_modules/@nx/react/typings/styled-jsx.d.ts",
    "../../node_modules/@nx/react/typings/cssmodule.d.ts",
    "../../node_modules/@nx/react/typings/image.d.ts"
  ],
  "exclude": [
    "src/**/*.spec.js",
    "src/**/*.test.js",
    "src/**/*.spec.ts",
    "src/**/*.test.ts",
    "src/**/*.spec.tsx",
    "src/**/*.test.tsx",
    "src/**/*.spec.jsx",
    "src/**/*.test.jsx",
    "jest.config.ts"
  ],
  "include": ["src/**/*", ".storybook/*.js"]
}

// nx.json
{
  "npmScope": "divido",
  "affected": {
    "defaultBase": "main"
  },
  "tasksRunnerOptions": {
    "default": {
      "runner": "nx/tasks-runners/default",
      "options": {
        "cacheableOperations": [
          "build",
          "lint",
          "test",
          "e2e",
          "build-storybook"
        ]
      }
    }
  },
  "generators": {
    "@nx/react": {
      "application": {
        "style": "none",
        "linter": "eslint",
        "babel": true
      },
      "component": {
        "style": "none"
      },
      "library": {
        "style": "none",
        "linter": "eslint"
      }
    },
    "@nx/next": {
      "application": {
        "style": "css",
        "linter": "eslint"
      }
    }
  },
  "namedInputs": {
    "default": ["{projectRoot}/**/*", "sharedGlobals"],
    "production": [
      "default",
      "!{projectRoot}/**/?(*.)+(spec|test).[jt]s?(x)?(.snap)",
      "!{projectRoot}/tsconfig.spec.json",
      "!{projectRoot}/jest.config.[jt]s",
      "!{projectRoot}/.eslintrc.json",
      "!{projectRoot}/.storybook/**/*",
      "!{projectRoot}/**/*.stories.@(js|jsx|ts|tsx|mdx)",
      "!{projectRoot}/tsconfig.storybook.json"
    ],
    "sharedGlobals": ["{workspaceRoot}/babel.config.json"]
  },
  "defaultProject": "calculator",
  "targetDefaults": {
    "build": {
      "dependsOn": ["^build"],
      "inputs": ["production", "^production"]
    }
  },
  "$schema": "./node_modules/nx/schemas/nx-schema.json"
}

Storybook Packages:

"@nx/storybook": "16.5.2",
"@storybook/core-server": "^7.4.0",
"@storybook/nextjs": "^7.4.0",
"@storybook/react": "^7.4.0",
"msw-storybook-addon": "^1.8.0",
"eslint-plugin-storybook": "^0.6.13",

Nx Report

Node   : 18.16.1
   OS     : darwin-x64
   yarn   : 1.22.19

   nx (global)        : 16.5.0
   nx                 : 16.5.2
   @nx/js             : 16.5.2
   @nx/jest           : 16.5.2
   @nx/linter         : 16.5.2
   @nx/workspace      : 16.5.2
   @nx/cypress        : 16.5.2
   @nx/devkit         : 16.5.2
   @nx/eslint-plugin  : 16.5.2
   @nx/next           : 16.5.2
   @nx/react          : 16.5.2
   @nx/rollup         : 16.5.2
   @nx/storybook      : 16.5.2
   @nrwl/tao          : 16.5.2
   @nx/web            : 16.5.2
   @nx/webpack        : 16.5.2
   typescript         : 4.4.4

Failure Logs

HMR] Cannot find update (Full reload needed)
cb @ VM3779 lib.vendors-node_modules_chakra-ui_react_dist_chakra-ui-react_esm_js-node_modules_reduxjs_toolkit-841b3d.iframe.bundle.js:137653
(anonymous) @ VM3779 lib.vendors-node_modules_chakra-ui_react_dist_chakra-ui-react_esm_js-node_modules_reduxjs_toolkit-841b3d.iframe.bundle.js:137683
Promise.then (async)
check @ VM3779 lib.vendors-node_modules_chakra-ui_react_dist_chakra-ui-react_esm_js-node_modules_reduxjs_toolkit-841b3d.iframe.bundle.js:137682
module.exports @ VM3779 lib.vendors-node_modules_chakra-ui_react_dist_chakra-ui-react_esm_js-node_modules_reduxjs_toolkit-841b3d.iframe.bundle.js:137644
processMessage @ VM3779 lib.vendors-node_modules_chakra-ui_react_dist_chakra-ui-react_esm_js-node_modules_reduxjs_toolkit-841b3d.iframe.bundle.js:137375
handleMessage @ VM3779 lib.vendors-node_modules_chakra-ui_react_dist_chakra-ui-react_esm_js-node_modules_reduxjs_toolkit-841b3d.iframe.bundle.js:137235
handleMessage @ VM3779 lib.vendors-node_modules_chakra-ui_react_dist_chakra-ui-react_esm_js-node_modules_reduxjs_toolkit-841b3d.iframe.bundle.js:137198

Package Manager Version

1.22.19

Operating System

[X] macOS
[ ] Linux
[ ] Windows
[ ] Other (Please specify)

Additional Information

No response

mandarini commented 1 year ago

Hi there @samhecquet-divido ! I am sorry but it's quite difficult for me to reproduce. Can you please create a minimum reproduction repository? It will help me a lot in debugging this for you!

github-actions[bot] commented 11 months ago

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs. If we missed this issue please reply to keep it active. Thanks for being a part of the Nx community! 🙏

github-actions[bot] commented 10 months ago

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.

nrwl / nx