Template Studio Fail on Vercel deployment

[bastienallain]

Template

• URL for category: https://tailwindui.com/templates/studio
• Template name: studio

Describe the bug
During the deployment process on Vercel, the build fails with a RangeError: Maximum call stack size exceeded error. This error occurs during the finalizing page optimization stage. The build works perfectly in a local environment (local build and serve), but consistently fails on Vercel deployment.

To Reproduce
Steps to reproduce the behavior:

1. Deploy the application to Vercel.
2. Monitor

the build process via Vercel's deployment logs.
3. Observe the build failure with the specific error message RangeError: Maximum call stack size exceeded.

Expected behavior
The expectation is for the build process to complete successfully on Vercel as it does locally, without encountering a stack overflow error.

Screenshots
N/A (Logs provided in the description should suffice for the error tracing)

Browser/Device (if applicable)

• OS: [e.g. Windows, macOS, Linux] (the operating system of the server/environment where the build is running)
• Browser: N/A (issue related to server-side build process)
• Version: N/A

Additional context

[14:56:54.698] Running build in Washington, D.C., USA (East) – iad1
[14:56:54.806] Cloning github.com/vivacoda/SBinnovate-main (Branch: main, Commit: b976c14)
[14:56:55.185] Previous build cache not available
[14:56:55.605] Cloning completed: 798.665ms
[14:56:55.829] Running "vercel build"
[14:56:56.328] Vercel CLI 33.1.0
[14:56:56.695] Running "install" command: `pnpm install --no-frozen-lockfile`...
[14:56:57.713] Progress: resolved 1, reused 0, downloaded 0, added 0
[14:56:58.753] Progress: resolved 20, reused 0, downloaded 11, added 0
[14:56:59.722] Progress: resolved 28, reused 0, downloaded 21, added 0
[14:57:00.739] Progress: resolved 32, reused 0, downloaded 26, added 0
[14:57:01.791] Progress: resolved 34, reused 0, downloaded 32, added 0
[14:57:02.654]  WARN  deprecated @leafac/html@3.0.3: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
[14:57:02.801] Progress: resolved 133, reused 0, downloaded 96, added 0
[14:57:03.801] Progress: resolved 158, reused 0, downloaded 129, added 0
[14:57:04.803] Progress: resolved 215, reused 0, downloaded 163, added 0
[14:57:05.807] Progress: resolved 310, reused 0, downloaded 251, added 0
[14:57:06.807] Progress: resolved 361, reused 0, downloaded 304, added 0
[14:57:07.809] Progress: resolved 424, reused 0, downloaded 360, added 0
[14:57:08.832] Progress: resolved 524, reused 0, downloaded 453, added 0
[14:57:09.540] Packages: +530
[14:57:09.541] ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
[14:57:09.859] Progress: resolved 558, reused 0, downloaded 498, added 0
[14:57:09.920] Packages are cloned from the content-addressable store to the virtual store.
[14:57:09.921]   Content-addressable store is at: /vercel/.pnpm-store/v3
[14:57:09.921]   Virtual store is at:             node_modules/.pnpm
[14:57:10.864] Progress: resolved 558, reused 0, downloaded 527, added 234
[14:57:11.872] Progress: resolved 558, reused 0, downloaded 527, added 429
[14:57:12.871] Progress: resolved 558, reused 0, downloaded 528, added 527
[14:57:15.637] Progress: resolved 558, reused 0, downloaded 529, added 527
[14:57:16.642] Progress: resolved 558, reused 0, downloaded 529, added 528
[14:57:18.343] Progress: resolved 558, reused 0, downloaded 530, added 528
[14:57:19.272] .../sharp@0.33.2/node_modules/sharp install$ node install/check
[14:57:19.344] Progress: resolved 558, reused 0, downloaded 531, added 530, done
[14:57:19.408] .../sharp@0.33.2/node_modules/sharp install: Done
[14:57:19.649] 
[14:57:19.650] dependencies:
[14:57:19.650] + @emailjs/browser 3.12.1
[14:57:19.651] + @headlessui/react 1.7.18
[14:57:19.651] + @heroicons/react 2.1.1
[14:57:19.651] + @leafac/rehype-shiki 2.2.1
[14:57:19.651] + @mdx-js/loader 3.0.0
[14:57:19.651] + @mdx-js/react 3.0.0
[14:57:19.651] + @next/mdx 14.0.4
[14:57:19.652] + @types/mdx 2.0.10
[14:57:19.652] + @types/node 20.11.1
[14:57:19.652] + @types/react 18.2.47
[14:57:19.652] + @types/react-dom 18.2.18
[14:57:19.652] + acorn 8.11.3
[14:57:19.652] + acorn-jsx 5.3.2
[14:57:19.652] + autoprefixer 10.4.16
[14:57:19.653] + clsx 2.1.0
[14:57:19.653] + escape-string-regexp 5.0.0
[14:57:19.653] + fast-glob 3.3.2
[14:57:19.655] + framer-motion 10.18.0
[14:57:19.655] + next 14.0.4
[14:57:19.655] + react 18.2.0
[14:57:19.656] + react-dom 18.2.0
[14:57:19.656] + recma-import-images 0.0.3
[14:57:19.656] + remark-gfm 4.0.0
[14:57:19.656] + remark-rehype-wrap 0.0.3
[14:57:19.656] + remark-unwrap-images 4.0.0
[14:57:19.656] + shiki 0.14.7
[14:57:19.656] + tailwindcss 3.4.1
[14:57:19.657] + typescript 5.3.3
[14:57:19.657] + unified-conditional 0.0.2
[14:57:19.657] 
[14:57:19.657] devDependencies:
[14:57:19.663] + eslint 8.56.0
[14:57:19.663] + eslint-config-next 14.0.4
[14:57:19.663] + prettier 3.2.2
[14:57:19.664] + prettier-plugin-tailwindcss 0.5.11
[14:57:19.664] + sharp 0.33.2
[14:57:19.664] 
[14:57:19.670]  WARN  Issues with peer dependencies found
[14:57:19.670] .
[14:57:19.670] ├─┬ @mdx-js/loader
[14:57:19.670] │ └── ✕ missing peer webpack@>=5
[14:57:19.670] ├─┬ autoprefixer
[14:57:19.671] │ └── ✕ missing peer postcss@^8.1.0
[14:57:19.671] └─┬ @leafac/rehype-shiki
[14:57:19.671]   └── ✕ unmet peer shiki@^0.11.1: found 0.14.7
[14:57:19.671] Peer dependencies that should be installed:
[14:57:19.671]   postcss@^8.1.0
[14:57:19.671]   webpack@>=5
[14:57:19.671] 
[14:57:19.726] Detected Next.js version: 14.0.4
[14:57:19.778] Running "yarn run build"
[14:57:20.072] yarn run v1.22.17
[14:57:20.097] $ next build
[14:57:21.426] Attention: Next.js now collects completely anonymous telemetry regarding usage.
[14:57:21.427] This information is used to shape Next.js' roadmap and prioritize features.
[14:57:21.427] You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
[14:57:21.427] https://nextjs.org/telemetry
[14:57:21.427] 
[14:57:21.776]    ▲ Next.js 14.0.4
[14:57:21.776] 
[14:57:21.777]    Creating an optimized production build ...
[14:57:43.002]  ✓ Compiled successfully
[14:57:43.003]    Linting and checking validity of types ...
[14:57:52.642]    Collecting page data ...
[14:57:54.276]    Generating static pages (0/16) ...
[14:57:54.629] 
   Generating static pages (4/16) 
[14:57:55.224] 
   Generating static pages (8/16) 
[14:57:55.800] 
   Generating static pages (12/16) 
[14:57:56.070] 
 ✓ Generating static pages (16/16) 
[14:57:56.255]    Finalizing page optimization ...
[14:57:56.255]    Collecting build traces ...
[14:58:05.134] RangeError: Maximum call stack size exceeded
[14:58:05.134]     at RegExp.exec (<anonymous>)
[14:58:05.137]     at create (/vercel/path0/node_modules/.pnpm/next@14.0.4_react-dom@18.2.0+react@18.2.0/node_modules/next/dist/compiled/micromatch/index.js:15:18889)
[14:58:05.137]     at create (/vercel/path0/node_modules/.pnpm/next@14.0.4_react-dom@18.2.0+react@18.2.0/node_modules/next/dist/compiled/micromatch/index.js:15:18918)
[14:58:05.138]     at create (/vercel/path0/node_modules/.pnpm/next@14.0.4_react-dom@18.2.0+react@18.2.0/node_modules/next/dist/compiled/micromatch/index.js:15:18918)
[14:58:05.138]     at parse.fastpaths (/vercel/path0/node_modules/.pnpm/next@14.0.4_react-dom@18.2.0+react@18.2.0/node_modules/next/dist/compiled/micromatch/index.js:15:18997)
[14:58:05.138]     at picomatch.makeRe (/vercel/path0/node_modules/.pnpm/next@14.0.4_react-dom@18.2.0+react@18.2.0/node_modules/next/dist/compiled/micromatch/index.js:15:21635)
[14:58:05.138]     at picomatch (/vercel/path0/node_modules/.pnpm/next@14.0.4_react-dom@18.2.0+react@18.2.0/node_modules/next/dist/compiled/micromatch/index.js:15:19637)
[14:58:05.138]     at /vercel/path0/node_modules/.pnpm/next@14.0.4_react-dom@18.2.0+react@18.2.0/node_modules/next/dist/compiled/micromatch/index.js:15:19294
[14:58:05.138]     at Array.map (<anonymous>)
[14:58:05.138]     at picomatch (/vercel/path0/node_modules/.pnpm/next@14.0.4_react-dom@18.2.0+react@18.2.0/node_modules/next/dist/compiled/micromatch/index.js:15:19286)
[14:58:05.216] error Command failed with exit code 1.
[14:58:05.217] info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
[14:58:05.231] Error: Command "yarn run build" exited with 1
[14:58:06.352] ```

[reinink]

Hey! Happy to help out here.

So we actually host this template demo on Vercel (https://studio.tailwindui.com) and it's deploying successfully.

The issue here might be related to pnpm, as it looks like that's what you're using based on your build log, whereas we're using npm. That said, I just tried to build the site locally with pnpm and it worked without any issues, so maybe not 😅

Two quick questions:

1. Have you modified the template at all, or are you trying to deploy exactly what was included in the ZIP file when downloaded from Tailwind UI?

2. When did you download the ZIP file from Tailwind UI? I ask because we pushed out an update to this template last week Wednesday that upgraded a bunch of this site template's dependencies, like Tailwind CSS, TypeScript and Next.js (upgraded to v14).

Thanks!

[bastienallain]

Hi there!

So I went on a little excavation and guess what? You’re right, it’s from pnpm, and yarn sails smoothly. But oh boy, try pnpm up —latest and you’re in for a wild ride! 😅

[reinink]

Good to know, saving this here to look at later:

➜  studio git:(main) ✗ pnpm up --latest
 WARN  deprecated @leafac/html@3.0.3: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
Already up to date
 WARN  Issues with peer dependencies found
.
├─┬ @mdx-js/loader 3.0.0
│ └── ✕ missing peer webpack@>=5
├─┬ autoprefixer 10.4.16
│ └── ✕ missing peer postcss@^8.1.0
└─┬ @leafac/rehype-shiki 2.2.1
  └── ✕ unmet peer shiki@^0.11.1: found 0.14.7
Peer dependencies that should be installed:
  postcss@^8.1.0  webpack@>=5     

Progress: resolved 553, reused 528, downloaded 0, added 0, done
Done in 6.1s

[thecrypticace]

Hey! So there are three things at play here:

First, sharp updated from v0.33.1 to v0.33.2 and has exposed a bug in Next.js that apparently only triggers during a deployment on Vercel. This is ultimately what was causing the failure. We've locked the version to 0.33.1 to work around the bug.

Second, older versions of PNPM don't install peer dependencies by default. This is what caused the warnings / errors about postcss and webpack. NPM changed this in v7 in Oct 2020 and PNPM finally changed this in v8 to align with NPM in May 2023. We don't list postcss nor webpack as explicit dependencies because of this — given they're automatically installed. Updating your version of pnpm should resolve this.

Third, we had an override for using a later version of shiki when we should not have — and it wasn't honored by pnpm anyway. We've updated the template to address the shiki peer dependency issue.

The updated template is available for download but you can make these changes — in addition to upgrading pnpm:

Change the version of shiki:

-    "shiki": "^0.14.7",
+    "shiki": "^0.11.1",

Pin sharp to 0.33.1:

-    "sharp": "^0.33.1"
+    "sharp": "0.33.1"

At the bottom, remove the overrides section completely:

-  },
+  }
-  "overrides": {
-    "@leafac/rehype-shiki": {
-      "shiki": ">=0.11.1"
-    }
-  }

Hope that helps! ✨