search

vercel / nextjs-subscription-payments

Clone, deploy, and fully customize a SaaS subscription application with Next.js.
https://subscription-payments.vercel.app/
MIT License
6.74k stars 1.38k forks source link

4 BUGS - (1) Error: DynamicServerError: Dynamic server usage: cookies (2) metadata & cache (3) issues with app/layout.tsx file (4) No storage for persist session #223

Closed ajayvignesh01 closed 9 months ago

ajayvignesh01 commented 1 year ago

I am getting all these errors when deploying the Stripe Subscription Starter template from Vercel. I set up all the environment variables correctly and the website is working, but why are all these errors popping up. A similar issue was present in the with-supabase template, and a contributor helped fix it (https://github.com/vercel/next.js/discussions/52913). Maybe that might help in resolving this. I'm not too familiar with frontend yet to troubleshoot.

[10:39:06.725] Running build in Washington, D.C., USA (East) – iad1
[10:39:06.768] Cloning github.com/0x-Legend/trade-sync (Branch: main, Commit: 4377098)
[10:39:07.218] Cloning completed: 449.878ms
[10:39:10.670] Restored build cache
[10:39:10.703] Running "vercel build"
[10:39:11.241] Vercel CLI 31.0.4
[10:39:11.611] Detected `pnpm-lock.yaml` version 6 generated by pnpm 8...
[10:39:11.631] Installing dependencies...
[10:39:12.272] Lockfile is up to date, resolution step is skipped
[10:39:12.361] Already up to date
[10:39:13.127] 
[10:39:13.578] Done in 1.8s
[10:39:13.594] Detected Next.js version: 13.4.3
[10:39:13.603] Running "pnpm run build"
[10:39:14.134] 
[10:39:14.135] > nextjs-subscription-payments@0.0.0 build /vercel/path0
[10:39:14.135] > next build
[10:39:14.135] 
[10:39:14.582] - warn You have enabled experimental feature (serverActions) in next.config.js.
[10:39:14.583] - warn Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.
[10:39:14.583] 
[10:39:14.689] - info Creating an optimized production build...
[10:39:23.869] - info Compiled successfully
[10:39:23.871] - info Linting and checking validity of types...
[10:39:26.766] - info Collecting page data...
[10:39:27.317] - info Generating static pages (0/8)
[10:39:27.359] - info Generating static pages (2/8)
[10:39:27.370] - info Generating static pages (4/8)
[10:39:27.428] - info Generating static pages (6/8)
[10:39:27.430] DynamicServerError: Dynamic server usage: cookies
[10:39:27.430]     at staticGenerationBailout (/vercel/path0/.next/server/chunks/883.js:11341:21)
[10:39:27.430]     at Object.cookies (/vercel/path0/.next/server/chunks/883.js:11231:62)
[10:39:27.431]     at NextServerComponentAuthStorageAdapter.getCookie (/vercel/path0/.next/server/chunks/913.js:199:42)
[10:39:27.431]     at NextServerComponentAuthStorageAdapter.getItem (/vercel/path0/.next/server/chunks/913.js:571:28)
[10:39:27.432]     at /vercel/path0/.next/server/chunks/883.js:3008:37
[10:39:27.432]     at Generator.next (<anonymous>)
[10:39:27.432]     at /vercel/path0/.next/server/chunks/883.js:2916:71
[10:39:27.432]     at new Promise (<anonymous>)
[10:39:27.432]     at __awaiter (/vercel/path0/.next/server/chunks/883.js:2898:12)
[10:39:27.432]     at getItemAsync (/vercel/path0/.next/server/chunks/883.js:3007:38) {
[10:39:27.432]   digest: 'DYNAMIC_SERVER_USAGE'
[10:39:27.432] }
[10:39:27.433] Error: DynamicServerError: Dynamic server usage: cookies
[10:39:27.433]     at staticGenerationBailout (/vercel/path0/.next/server/chunks/883.js:11341:21)
[10:39:27.433]     at Object.cookies (/vercel/path0/.next/server/chunks/883.js:11231:62)
[10:39:27.433]     at NextServerComponentAuthStorageAdapter.getCookie (/vercel/path0/.next/server/chunks/913.js:199:42)
[10:39:27.435]     at NextServerComponentAuthStorageAdapter.getItem (/vercel/path0/.next/server/chunks/913.js:571:28)
[10:39:27.435]     at /vercel/path0/.next/server/chunks/883.js:3008:37
[10:39:27.435]     at Generator.next (<anonymous>)
[10:39:27.435]     at /vercel/path0/.next/server/chunks/883.js:2916:71
[10:39:27.435]     at new Promise (<anonymous>)
[10:39:27.435]     at __awaiter (/vercel/path0/.next/server/chunks/883.js:2898:12)
[10:39:27.435]     at getItemAsync (/vercel/path0/.next/server/chunks/883.js:3007:38) {
[10:39:27.435]   digest: 'DYNAMIC_SERVER_USAGE'
[10:39:27.436] }
[10:39:27.436] Error: DynamicServerError: Dynamic server usage: cookies
[10:39:27.436]     at staticGenerationBailout (/vercel/path0/.next/server/chunks/883.js:11341:21)
[10:39:27.436]     at Object.cookies (/vercel/path0/.next/server/chunks/883.js:11231:62)
[10:39:27.436]     at NextServerComponentAuthStorageAdapter.getCookie (/vercel/path0/.next/server/chunks/913.js:199:42)
[10:39:27.436]     at NextServerComponentAuthStorageAdapter.getItem (/vercel/path0/.next/server/chunks/913.js:571:28)
[10:39:27.436]     at /vercel/path0/.next/server/chunks/883.js:3008:37
[10:39:27.436]     at Generator.next (<anonymous>)
[10:39:27.436]     at /vercel/path0/.next/server/chunks/883.js:2916:71
[10:39:27.436]     at new Promise (<anonymous>)
[10:39:27.436]     at __awaiter (/vercel/path0/.next/server/chunks/883.js:2898:12)
[10:39:27.436]     at getItemAsync (/vercel/path0/.next/server/chunks/883.js:3007:38) {
[10:39:27.437]   digest: 'DYNAMIC_SERVER_USAGE'
[10:39:27.437] }
[10:39:27.438] Error: Dynamic server usage: cookies
[10:39:27.443] 
[10:39:27.444] - warn metadata.metadataBase is not set for resolving social open graph or twitter images, fallbacks to "https://trade-sync-3cnzhd5py-0xlegend.vercel.app". See https://nextjs.org/docs/app/api-reference/functions/generate-metadata#metadatabase
[10:39:27.444] 
[10:39:27.486] - warn Entire page / deopted into client-side rendering. https://nextjs.org/docs/messages/deopted-into-client-rendering /
[10:39:27.503] DynamicServerError: Dynamic server usage: cookies
[10:39:27.504]     at staticGenerationBailout (/vercel/path0/.next/server/chunks/883.js:11341:21)
[10:39:27.504]     at Object.cookies (/vercel/path0/.next/server/chunks/883.js:11231:62)
[10:39:27.504]     at NextServerComponentAuthStorageAdapter.getCookie (/vercel/path0/.next/server/chunks/913.js:199:42)
[10:39:27.504]     at NextServerComponentAuthStorageAdapter.getItem (/vercel/path0/.next/server/chunks/913.js:571:28)
[10:39:27.504]     at /vercel/path0/.next/server/chunks/883.js:3008:37
[10:39:27.504]     at Generator.next (<anonymous>)
[10:39:27.504]     at /vercel/path0/.next/server/chunks/883.js:2916:71
[10:39:27.504]     at new Promise (<anonymous>)
[10:39:27.505]     at __awaiter (/vercel/path0/.next/server/chunks/883.js:2898:12)
[10:39:27.505]     at getItemAsync (/vercel/path0/.next/server/chunks/883.js:3007:38) {
[10:39:27.505]   digest: 'DYNAMIC_SERVER_USAGE'
[10:39:27.505] }
[10:39:27.505] Error: DynamicServerError: Dynamic server usage: cookies
[10:39:27.505]     at staticGenerationBailout (/vercel/path0/.next/server/chunks/883.js:11341:21)
[10:39:27.505]     at Object.cookies (/vercel/path0/.next/server/chunks/883.js:11231:62)
[10:39:27.505]     at NextServerComponentAuthStorageAdapter.getCookie (/vercel/path0/.next/server/chunks/913.js:199:42)
[10:39:27.505]     at NextServerComponentAuthStorageAdapter.getItem (/vercel/path0/.next/server/chunks/913.js:571:28)
[10:39:27.505]     at /vercel/path0/.next/server/chunks/883.js:3008:37
[10:39:27.505]     at Generator.next (<anonymous>)
[10:39:27.505]     at /vercel/path0/.next/server/chunks/883.js:2916:71
[10:39:27.505]     at new Promise (<anonymous>)
[10:39:27.505]     at __awaiter (/vercel/path0/.next/server/chunks/883.js:2898:12)
[10:39:27.506]     at getItemAsync (/vercel/path0/.next/server/chunks/883.js:3007:38) {
[10:39:27.506]   digest: 'DYNAMIC_SERVER_USAGE'
[10:39:27.506] }
[10:39:27.506] Error: DynamicServerError: Dynamic server usage: cookies
[10:39:27.506]     at staticGenerationBailout (/vercel/path0/.next/server/chunks/883.js:11341:21)
[10:39:27.506]     at Object.cookies (/vercel/path0/.next/server/chunks/883.js:11231:62)
[10:39:27.506]     at NextServerComponentAuthStorageAdapter.getCookie (/vercel/path0/.next/server/chunks/913.js:199:42)
[10:39:27.506]     at NextServerComponentAuthStorageAdapter.getItem (/vercel/path0/.next/server/chunks/913.js:571:28)
[10:39:27.506]     at /vercel/path0/.next/server/chunks/883.js:3008:37
[10:39:27.506]     at Generator.next (<anonymous>)
[10:39:27.506]     at /vercel/path0/.next/server/chunks/883.js:2916:71
[10:39:27.506]     at new Promise (<anonymous>)
[10:39:27.506]     at __awaiter (/vercel/path0/.next/server/chunks/883.js:2898:12)
[10:39:27.506]     at getItemAsync (/vercel/path0/.next/server/chunks/883.js:3007:38) {
[10:39:27.507]   digest: 'DYNAMIC_SERVER_USAGE'
[10:39:27.507] }
[10:39:27.507] 
[10:39:27.507] 
[10:39:27.507] Error: Dynamic server usage: cookies
[10:39:27.522] DynamicServerError: Dynamic server usage: cookies
[10:39:27.522]     at staticGenerationBailout (/vercel/path0/.next/server/chunks/883.js:11341:21)
[10:39:27.522]     at Object.cookies (/vercel/path0/.next/server/chunks/883.js:11231:62)
[10:39:27.522]     at NextServerComponentAuthStorageAdapter.getCookie (/vercel/path0/.next/server/chunks/913.js:199:42)
[10:39:27.522]     at NextServerComponentAuthStorageAdapter.getItem (/vercel/path0/.next/server/chunks/913.js:571:28)
[10:39:27.523]     at /vercel/path0/.next/server/chunks/883.js:3008:37
[10:39:27.523]     at Generator.next (<anonymous>)
[10:39:27.523]     at /vercel/path0/.next/server/chunks/883.js:2916:71
[10:39:27.523]     at new Promise (<anonymous>)
[10:39:27.523]     at __awaiter (/vercel/path0/.next/server/chunks/883.js:2898:12)
[10:39:27.523]     at getItemAsync (/vercel/path0/.next/server/chunks/883.js:3007:38) {
[10:39:27.523]   digest: 'DYNAMIC_SERVER_USAGE'
[10:39:27.523] }
[10:39:27.523] Error: DynamicServerError: Dynamic server usage: cookies
[10:39:27.523]     at staticGenerationBailout (/vercel/path0/.next/server/chunks/883.js:11341:21)
[10:39:27.523]     at Object.cookies (/vercel/path0/.next/server/chunks/883.js:11231:62)
[10:39:27.523]     at NextServerComponentAuthStorageAdapter.getCookie (/vercel/path0/.next/server/chunks/913.js:199:42)
[10:39:27.523]     at NextServerComponentAuthStorageAdapter.getItem (/vercel/path0/.next/server/chunks/913.js:571:28)
[10:39:27.523]     at /vercel/path0/.next/server/chunks/883.js:3008:37
[10:39:27.523]     at Generator.next (<anonymous>)
[10:39:27.523]     at /vercel/path0/.next/server/chunks/883.js:2916:71
[10:39:27.524]     at new Promise (<anonymous>)
[10:39:27.524]     at __awaiter (/vercel/path0/.next/server/chunks/883.js:2898:12)
[10:39:27.524]     at getItemAsync (/vercel/path0/.next/server/chunks/883.js:3007:38) {
[10:39:27.524]   digest: 'DYNAMIC_SERVER_USAGE'
[10:39:27.524] }
[10:39:27.527] 
[10:39:27.527] 
[10:39:27.530] - warn Entire page /signin deopted into client-side rendering. https://nextjs.org/docs/messages/deopted-into-client-rendering /signin
[10:39:27.543] DynamicServerError: Dynamic server usage: cookies
[10:39:27.544]     at staticGenerationBailout (/vercel/path0/.next/server/chunks/883.js:11341:21)
[10:39:27.544]     at Object.cookies (/vercel/path0/.next/server/chunks/883.js:11231:62)
[10:39:27.544]     at NextServerComponentAuthStorageAdapter.getCookie (/vercel/path0/.next/server/chunks/913.js:199:42)
[10:39:27.544]     at NextServerComponentAuthStorageAdapter.getItem (/vercel/path0/.next/server/chunks/913.js:571:28)
[10:39:27.544]     at /vercel/path0/.next/server/chunks/883.js:3008:37
[10:39:27.544]     at Generator.next (<anonymous>)
[10:39:27.544]     at /vercel/path0/.next/server/chunks/883.js:2916:71
[10:39:27.544]     at new Promise (<anonymous>)
[10:39:27.544]     at __awaiter (/vercel/path0/.next/server/chunks/883.js:2898:12)
[10:39:27.544]     at getItemAsync (/vercel/path0/.next/server/chunks/883.js:3007:38) {
[10:39:27.544]   digest: 'DYNAMIC_SERVER_USAGE'
[10:39:27.544] }
[10:39:27.544] Error: DynamicServerError: Dynamic server usage: cookies
[10:39:27.545]     at staticGenerationBailout (/vercel/path0/.next/server/chunks/883.js:11341:21)
[10:39:27.545]     at Object.cookies (/vercel/path0/.next/server/chunks/883.js:11231:62)
[10:39:27.545]     at NextServerComponentAuthStorageAdapter.getCookie (/vercel/path0/.next/server/chunks/913.js:199:42)
[10:39:27.545]     at NextServerComponentAuthStorageAdapter.getItem (/vercel/path0/.next/server/chunks/913.js:571:28)
[10:39:27.545]     at /vercel/path0/.next/server/chunks/883.js:3008:37
[10:39:27.545]     at Generator.next (<anonymous>)
[10:39:27.545]     at /vercel/path0/.next/server/chunks/883.js:2916:71
[10:39:27.545]     at new Promise (<anonymous>)
[10:39:27.545]     at __awaiter (/vercel/path0/.next/server/chunks/883.js:2898:12)
[10:39:27.545]     at getItemAsync (/vercel/path0/.next/server/chunks/883.js:3007:38) {
[10:39:27.545]   digest: 'DYNAMIC_SERVER_USAGE'
[10:39:27.545] }
[10:39:27.545] 
[10:39:27.545] 
[10:39:27.549] - info Generating static pages (8/8)
[10:39:27.564] - info Finalizing page optimization...
[10:39:27.567] 
[10:39:27.643] Route (app)                                Size     First Load JS
[10:39:27.643] ┌ λ /                                      5.33 kB          85 kB
[10:39:27.643] ├ λ /account                               3.12 kB        88.4 kB
[10:39:27.643] ├ λ /api/create-checkout-session           0 B                0 B
[10:39:27.643] ├ λ /api/create-portal-link                0 B                0 B
[10:39:27.644] ├ λ /api/webhooks                          0 B                0 B
[10:39:27.644] ├ λ /auth/callback                         0 B                0 B
[10:39:27.644] └ λ /signin                                21.1 kB         129 kB
[10:39:27.644] + First Load JS shared by all              79.6 kB
[10:39:27.644]   ├ chunks/810-b9235b348c6a4427.js         24.9 kB
[10:39:27.644]   ├ chunks/d596c951-bbc7c11c24bddf18.js    52.7 kB
[10:39:27.645]   ├ chunks/main-app-2120efdc862394fb.js    211 B
[10:39:27.645]   └ chunks/webpack-4da0dd7915bdcd38.js     1.78 kB
[10:39:27.645] 
[10:39:27.645] Route (pages)                              Size     First Load JS
[10:39:27.645] ─ ○ /404                                   178 B          86.4 kB
[10:39:27.645] + First Load JS shared by all              86.2 kB
[10:39:27.645]   ├ chunks/main-af8a46e9efa531e6.js        84.2 kB
[10:39:27.645]   ├ chunks/pages/_app-db08ebc8c72074e8.js  192 B
[10:39:27.645]   └ chunks/webpack-4da0dd7915bdcd38.js     1.78 kB
[10:39:27.645] 
[10:39:27.645] ƒ Middleware                               101 kB
[10:39:27.645] 
[10:39:27.646] λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
[10:39:27.646] ○  (Static)  automatically rendered as static HTML (uses no initial props)
[10:39:27.646] 
[10:39:31.545] Traced Next.js server files in: 3.210s
[10:39:34.757] Created all serverless functions in: 3.212s
[10:39:34.822] Collected static files (public/, static/, .next/static): 5.365ms
[10:39:35.455] Build Completed in /vercel/output [24s]
[10:39:35.818] Deploying outputs...
[10:39:41.615] Deployment completed
[10:39:47.686] Uploading build cache [105.27 MB]...
[10:39:50.803] Build cache uploaded: 3.118s

I am also getting the following when testing locally using npm dev run. I think it might be sort of due to the above?

- warn metadata.metadataBase is not set for resolving social open graph or twitter images, fallbacks to "http://localhost:3000". See https://nextjs.org/docs/app/api-reference/functions/generate-metadata#metadatabase

-  ┌ GET / 200 in 1048ms
   │
   ├──── GET https://bqnjiovfwmtyjgik../rest/v1/products?select=*%2Cpric.. 200 in 549ms (cache: MISS)
   │
   ├──── GET https://bqnjiovfwmtyjgik../rest/v1/subscriptions?select=*%2Cpric.. 200 in 528ms (cache: MISS)
   │
   └──── GET https://bqnjiovfwmtyjgik../auth/v1/user 401 in 537ms (cache: MISS)

And, in the app/layout.tsx file, the following errors are showing up (the website still runs though). Not sure if this is also related to the above.

Screenshot 2023-07-20 at 10 49 08 AM

Lastly:

No storage option exists to persist the session, which may result in unexpected behavior when using auth.
        If you want to set persistSession to true, please provide a storage option or you may set persistSession to false to disable this warning.
salvinoto commented 1 year ago

Yes, getting all of those exact errors as well. also getting missing encoding error

ajayvignesh01 commented 1 year ago

For that error, pretty easy fix, it's just a missing dependency.

On local: add the following to dependencies in package.json, then run 'pnpm install', and push to deploy. This should remake the pnpm-lock.yaml file to also include the encoding dependency.

"encoding": "^0.1.13"
ajayvignesh01 commented 1 year ago

Ok, I figured out a fix for the Dynamic Error Server Error.

Add the following line after the imports to your app/page.tsx & app/signin/page.tsx

export const dynamic = "force-dynamic"

Still unresolved errors: Error, 2, 3, 4 as listed in the main post above.

Shawns2759 commented 1 year ago

I am having this exact same issue.

leerob commented 9 months ago

https://github.com/vercel/nextjs-subscription-payments/pull/278