Storybook install in nextjs 14 causes vercel build error

[nirav-v]

Summary

I have my portfolio site built with nextjs 14 and deployed on vercel. I set up storybook in my project using the next js guide in the docs - simply ran npx storybook@latest init.

here is a link to the repo: https://github.com/nirav-v/next-portfolio

It seems that the storybook install causes my build on vercel to fail. My deployment shows this error in the build logs RangeError: Maximum call stack size exceeded. I have tested that resetting to the commit before setting up storybook allows the deployment to work fine. I will paste the full build logs below along with my main.ts storybook file and package.json

This is specific to vercel as redeploying the same repo on netlify works fine. It seems to be an issue with how vercel traces files during build but I am at a loss on how to debug this. Posting this incase anyone else has set up storybook in a similar environment and run into this issue and can help me out. I would think this is a fairly common setup (storybook + next 14 + vercel), so I must be doing something wrong on my end.

Additional information

package.json

{
  "name": "next-portfolio",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build"
  },
  "dependencies": {
    "next": "14.0.3",
    "openai": "^4.38.2",
    "react": "^18",
    "react-dom": "^18",
    "react-icons": "^5.0.1"
  },
  "devDependencies": {
    "@chromatic-com/storybook": "^3.2.4",
    "@storybook/addon-essentials": "^8.5.3",
    "@storybook/addon-interactions": "^8.5.3",
    "@storybook/addon-onboarding": "^8.5.3",
    "@storybook/blocks": "^8.5.3",
    "@storybook/nextjs": "^8.5.3",
    "@storybook/react": "^8.5.3",
    "@storybook/test": "^8.5.3",
    "@types/node": "^20",
    "@types/react": "18.3.18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "daisyui": "^4.10.2",
    "eslint": "^8",
    "eslint-config-next": "14.0.3",
    "eslint-plugin-storybook": "^0.11.2",
    "postcss": "^8",
    "storybook": "^8.5.3",
    "tailwindcss": "^3.3.0",
    "typescript": "5.7.3"
  }
}

Storybook main.ts file

import type { StorybookConfig } from '@storybook/nextjs';

const config: StorybookConfig = {
  stories: [
    '../components/**/*.stories.@(js|jsx|ts|tsx)',
    '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
  ],
  framework: '@storybook/nextjs',
  staticDirs: ['../public'],
};
export default config;

Vercel Build Logs:

[21:14:41.214] Running build in Washington, D.C., USA (East) – iad1
[21:14:42.891] Cloning github.com/nirav-v/next-portfolio (Branch: main, Commit: 210d0ce)
[21:14:44.149] Cloning completed: 1.256s
[21:14:46.220] Restored build cache from previous deployment (6Y8vc61wyYz3b8h26enYfWVmUnRo)
[21:14:46.317] Running "vercel build"
[21:14:46.751] Vercel CLI 40.1.0
[21:14:47.104] Installing dependencies...
[21:15:15.043] npm warn ERESOLVE overriding peer dependency
[21:15:34.921] 
[21:15:34.922] added 528 packages, removed 1 package, and changed 30 packages in 48s
[21:15:34.922] 
[21:15:34.922] 225 packages are looking for funding
[21:15:34.922]   run `npm fund` for details
[21:15:34.946] Detected Next.js version: 14.0.3
[21:15:34.955] Running "npm run build"
[21:15:35.089] 
[21:15:35.091] > next-portfolio@0.1.0 build
[21:15:35.091] > next build
[21:15:35.091] 
[21:15:35.727]    ▲ Next.js 14.0.3
[21:15:35.728] 
[21:15:35.729]    Creating an optimized production build ...
[21:15:46.612] 
[21:15:46.613] 🌼   �[35mdaisyUI�[39m �[2m4.10.2�[22m
[21:15:46.934] ├─ �[32m✔︎�[39m 2 themes added�[2m		https://daisyui.com/docs/themes�[22m
[21:15:46.934] ╰─ �[32m❤︎�[39m �[0mSupport daisyUI project:�[0m	�[2mhttps://opencollective.com/daisyui�[22m
[21:15:46.934] 
[21:15:49.572]  ✓ Compiled successfully
[21:15:49.573]    Linting and checking validity of types ...
[21:15:54.086]    Collecting page data ...
[21:15:55.219]    Generating static pages (0/8) ...
[21:15:55.618] 
   Generating static pages (2/8) 
[21:15:55.739] 
   Generating static pages (4/8) 
[21:15:55.900] 
   Generating static pages (6/8) 
[21:15:56.129] 
 ✓ Generating static pages (8/8) 
[21:15:56.699]    Finalizing page optimization ...
[21:15:56.700]    Collecting build traces ...
[21:16:04.412] RangeError: Maximum call stack size exceeded
[21:16:04.414]     at parse (/vercel/path0/node_modules/next/dist/compiled/micromatch/index.js:15:6313)
[21:16:04.414]     at picomatch.makeRe (/vercel/path0/node_modules/next/dist/compiled/micromatch/index.js:15:21670)
[21:16:04.414]     at picomatch (/vercel/path0/node_modules/next/dist/compiled/micromatch/index.js:15:19637)
[21:16:04.415]     at /vercel/path0/node_modules/next/dist/compiled/micromatch/index.js:15:19294
[21:16:04.415]     at Array.map (<anonymous>)
[21:16:04.415]     at picomatch (/vercel/path0/node_modules/next/dist/compiled/micromatch/index.js:15:19286)
[21:16:04.415]     at micromatch.isMatch (/vercel/path0/node_modules/next/dist/compiled/micromatch/index.js:15:1090)
[21:16:04.415]     at /vercel/path0/node_modules/next/dist/build/collect-build-traces.js:244:48
[21:16:04.415]     at shouldIgnore (/vercel/path0/node_modules/next/dist/build/collect-build-traces.js:75:9)
[21:16:04.415]     at /vercel/path0/node_modules/next/dist/build/collect-build-traces.js:86:23
[21:16:04.476] Error: Command "npm run build" exited with 1
[21:16:04.836] 

Create a reproduction

No response