storybook: [Bug]: Build hangs at "Output directory"
Describe the bug
We have a storybook setup using the NextJS framework and it seems to randomly hang at the step of info => Output directory: /vercel/path0/apps/joinhandshake-web/storybook-static
Output from recent build on Vercel: https://gist.github.com/pm0u/7e58e553cf3eee2ea07d9fc086d4a095
At this point it will hang for up to 45mins, which is the maximum build time on Vercel. It does also occasionally happen locally on MacOS. It does not happen every build.
"dependencies": {
"@headlessui/react": "^1.7.13",
"@portabletext/react": "^2.0.0",
"@sanity/client": "^6.1.1",
"@sanity/image-url": "^1.0.1",
"@types/async-retry": "^1.4.5",
"@types/node": "^18.15",
"@types/react": "~18.0.28",
"@types/react-dom": "~18.0.11",
"async-retry": "^1.3.3",
"class-variance-authority": "^0.4.0",
"cross-env": "^7.0.3",
"interactjs": "^1.10.17",
"jose": "^4.11.4",
"lottie-react": "^2.4.0",
"moment": "^2.29.4",
"next": "13.3.1",
"next-plugin-preval": "^1.2.4",
"next-sanity": "^4.3.2",
"next-sanity-image": "^6.0.0",
"pixi.js": "^6.0.4",
"postcss-media-minmax": "^5.0.0",
"puppeteer": "^19.7.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-gist": "^1.2.4",
"react-youtube": "^10.1.0",
"schema-dts": "^1.1.2",
"sharp": "^0.31.3",
"typescript": "4.9.3"
},
"devDependencies": {
"@next/bundle-analyzer": "^13.1.2",
"@storybook/addon-a11y": "^7.0.18",
"@storybook/addon-actions": "7.0.18",
"@storybook/addon-essentials": "7.0.18",
"@storybook/addon-interactions": "7.0.18",
"@storybook/addon-links": "7.0.18",
"@storybook/blocks": "7.0.18",
"@storybook/nextjs": "7.0.18",
"@storybook/react": "7.0.18",
"@types/twitter-for-web": "^0.0.2",
"@typescript-eslint/eslint-plugin": "^5.47.0",
"autoprefixer": "^10.4.13",
"eslint": "8.28.0",
"eslint-config-next": "13.1.2",
"eslint-config-prettier": "^8.5.0",
"eslint-config-standard-with-typescript": "^24.0.0",
"eslint-mdx": "^2.0.5",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-mdx": "^2.0.5",
"eslint-plugin-n": "^15.6.0",
"eslint-plugin-promise": "^6.1.1",
"eslint-plugin-storybook": "^0.6.8",
"eslint-plugin-tailwindcss": "^3.12.1",
"file-loader": "^6.2.0",
"postcss": "^8.4.21",
"prettier": "^2.8.1",
"prettier-plugin-tailwindcss": "^0.2.6",
"sass": "^1.57.1",
"storybook": "7.0.18",
"stylelint": "^15.4.0",
"stylelint-config-prettier": "^9.0.4",
"stylelint-config-standard": "^32.0.0",
"stylelint-prettier": "^3.0.0",
"tailwindcss": "^3.3.2",
"typescript-plugin-css-modules": "^5"
}
This seems to have started with the upgrade to v7 and has occurred from versions 7.0.4 to 7.0.18. The first deployment we had this occur on, this is the package.json:
"dependencies": {
"@headlessui/react": "^1.7.13",
"@portabletext/react": "^2.0.0",
"@sanity/client": "^5.0.0",
"@sanity/image-url": "^1.0.1",
"@types/async-retry": "^1.4.5",
"@types/node": "^18.15",
"@types/react": "~18.0.28",
"@types/react-dom": "~18.0.11",
"async-retry": "^1.3.3",
"class-variance-authority": "^0.4.0",
"interactjs": "^1.10.17",
"jose": "^4.11.4",
"lottie-react": "^2.4.0",
"next": "13.3.1",
"next-plugin-preval": "^1.2.4",
"next-sanity": "^4.1.5",
"next-sanity-image": "^6.0.0",
"pixi.js": "^6.0.4",
"postcss-media-minmax": "^5.0.0",
"puppeteer": "^19.7.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-youtube": "^10.1.0",
"schema-dts": "^1.1.2",
"sharp": "^0.31.3",
"typescript": "4.9.3"
},
"devDependencies": {
"@next/bundle-analyzer": "^13.1.2",
"@storybook/addon-a11y": "^7.0.4",
"@storybook/addon-actions": "^7.0.4",
"@storybook/addon-essentials": "^7.0.4",
"@storybook/addon-interactions": "^7.0.4",
"@storybook/addon-links": "^7.0.4",
"@storybook/blocks": "^7.0.4",
"@storybook/nextjs": "^7.0.4",
"@storybook/react": "^7.0.4",
"@typescript-eslint/eslint-plugin": "^5.47.0",
"autoprefixer": "^10.4.13",
"eslint": "8.28.0",
"eslint-config-next": "13.1.2",
"eslint-config-prettier": "^8.5.0",
"eslint-config-standard-with-typescript": "^24.0.0",
"eslint-mdx": "^2.0.5",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-mdx": "^2.0.5",
"eslint-plugin-n": "^15.6.0",
"eslint-plugin-promise": "^6.1.1",
"eslint-plugin-storybook": "^0.6.8",
"eslint-plugin-tailwindcss": "^3.10.1",
"file-loader": "^6.2.0",
"jiti": "^1.18.2",
"postcss": "^8.4.21",
"prettier": "^2.8.1",
"prettier-plugin-tailwindcss": "^0.2.6",
"sass": "^1.57.1",
"storybook": "^7.0.4",
"stylelint": "^15.4.0",
"stylelint-config-prettier": "^9.0.4",
"stylelint-config-standard": "^32.0.0",
"stylelint-prettier": "^3.0.0",
"tailwindcss": "^3.3.1",
"typescript-plugin-css-modules": "^5"
}
The previous commit had the following package.json:
"dependencies": {
"@headlessui/react": "^1.7.13",
"@portabletext/react": "^2.0.0",
"@sanity/client": "^5.0.0",
"@sanity/image-url": "^1.0.1",
"@types/async-retry": "^1.4.5",
"@types/node": "^18.15",
"@types/react": "~18.0.28",
"@types/react-dom": "~18.0.11",
"async-retry": "^1.3.3",
"class-variance-authority": "^0.4.0",
"eslint-plugin-tailwindcss": "^3.10.1",
"interactjs": "^1.10.17",
"jose": "^4.11.4",
"lottie-react": "^2.4.0",
"next": "13.3.1",
"next-plugin-preval": "^1.2.4",
"next-sanity": "^4.1.5",
"next-sanity-image": "^6.0.0",
"pixi.js": "^6.0.4",
"postcss-media-minmax": "^5.0.0",
"puppeteer": "^19.7.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-youtube": "^10.1.0",
"schema-dts": "^1.1.2",
"sharp": "^0.31.3",
"typescript": "4.9.3"
},
"devDependencies": {
"@next/bundle-analyzer": "^13.1.2",
"@storybook/addon-a11y": "^7.0.4",
"@storybook/addon-actions": "^7.0.4",
"@storybook/addon-essentials": "^7.0.4",
"@storybook/addon-interactions": "^7.0.4",
"@storybook/addon-links": "^7.0.4",
"@storybook/blocks": "^7.0.4",
"@storybook/nextjs": "^7.0.4",
"@storybook/react": "^7.0.4",
"@swc-node/register": "^1.6.3",
"@swc/core": "^1.3.44",
"@typescript-eslint/eslint-plugin": "^5.47.0",
"autoprefixer": "^10.4.13",
"eslint": "8.28.0",
"eslint-config-next": "13.1.2",
"eslint-config-prettier": "^8.5.0",
"eslint-config-standard-with-typescript": "^24.0.0",
"eslint-mdx": "^2.0.5",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-mdx": "^2.0.5",
"eslint-plugin-n": "^15.6.0",
"eslint-plugin-promise": "^6.1.1",
"eslint-plugin-storybook": "^0.6.8",
"file-loader": "^6.2.0",
"postcss": "^8.4.21",
"prettier": "^2.8.1",
"prettier-plugin-tailwindcss": "^0.2.6",
"sass": "^1.57.1",
"storybook": "^7.0.4",
"stylelint": "^15.4.0",
"stylelint-config-prettier": "^9.0.4",
"stylelint-config-standard": "^32.0.0",
"stylelint-prettier": "^3.0.0",
"tailwindcss": "^3.3.1",
"typescript-plugin-css-modules": "^5"
}
There were 2 changes - adding jiti (which has now been removed in the latest/first package.json, problem persists) and moving eslint-plugin-tailwindcss to devDeps - I don’t think either of these changes are likely culprits.
Other things I’ve tried:
- removing any stories that had SCSS dependencies, still persisted
To Reproduce
No response
System
Environment Info:
System:
OS: macOS 12.6.5
CPU: (10) arm64 Apple M1 Max
Binaries:
Node: 18.15.0 - ~/.nvm/versions/node/v18.15.0/bin/node
Yarn: 1.22.19 - ~/.nvm/versions/node/v18.15.0/bin/yarn
npm: 9.5.0 - ~/.nvm/versions/node/v18.15.0/bin/npm
Browsers:
Chrome: 114.0.5735.106
Firefox: 112.0.2
Safari: 16.5
Additional context
No response
About this issue
- Original URL
- State: closed
- Created a year ago
- Reactions: 6
- Comments: 24 (9 by maintainers)
That was how I hacked in why-is-node-running when diagnosing. https://github.com/mafintosh/why-is-node-running#usage
As one more data point, we were experiencing this hang about 1 in 5 runs on local macbook pro m1s. We had telemetry disabled in main.js. This wasn’t enough (per the note in https://storybook.js.org/docs/react/configure/telemetry#how-to-opt-out that there is an event prior to processing main.js). Disabling it on the command line via
--disable-telemetryappears to have made it rock solid.In case helpful, here’s a
why-is-node-runninglog from when telemetry was running and it hung.I’ve created a debug script that I think we will use for builds going forward to help pinpoint the issue. If we use this on every build hopefully in a few days we can get a useful log
Edit: updated script to fully working latest version