search

vercel / nextjs-subscription-payments

Clone, deploy, and fully customize a SaaS subscription application with Next.js.
https://subscription-payments.vercel.app/
MIT License
5.83k stars 1.19k 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 5 months ago

ajayvignesh01 commented 12 months 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 12 months ago

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

ajayvignesh01 commented 12 months 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 12 months 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 11 months ago

I am having this exact same issue.

leerob commented 5 months ago

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