vercel / next.js

The React Framework
https://nextjs.org
MIT License
127.52k stars 27.04k forks source link

Standalone mode and `experimental-edge` API route shows trace warning #42899

Closed Thisisjuke closed 2 years ago

Thisisjuke commented 2 years ago

Verify canary release

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #59-Ubuntu SMP Fri Sep 9 09:37:59 UTC 2022
Binaries:
  Node: 16.14.0
  npm: 8.3.1
  Yarn: 1.22.19
  pnpm: 7.15.0
Relevant packages:
  next: 13.0.3
  eslint-config-next: 13.0.3
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

next build (to test in local) / Vercel + github

Describe the Bug

When I build my app locally and start it : loclahost:3000/api/og displays my OG card.

work locally using yarn build && yarn start

My website is well deployed (no error on Vercel during build) but going to /api/og raise a 500 error.

500 error when I go to url mywebsite.vercel.app/api/og

Sequel of this thread here that has been closed: https://github.com/vercel/next.js/issues/41968

Expected Behavior

My deployed website should deploy

Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster

https://github.com/Thisisjuke/nextjs-og-next13-bug-reproduction

To Reproduce

Everything like: https://github.com/vercel/next.js/issues/41968

@brightonmike has the same issue but this one was closed 2 weeks ago and we don't have any news in the previous thread.

balazsorban44 commented 2 years ago

Do you have a link to your deployment? :thinking: Your reproduction seems to work fine here: https://nextjs-42899-ahhsrnevq-balazsorban.vercel.app/api/og

Can you also check your logs on Vercel and comment here what the 500 error said?

Thisisjuke commented 2 years ago

@balazsorban44 I updated nextjs to the canary version.

yarn add next@canary

It's seems that the difference is that that error is now a warning :

[Error: ENOENT: no such file or directory, open '/path/repo/.next/server/pages/api/og.js.nft.json']

Local build information:

$ next build
info  - Linting and checking validity of types  
warn  - You are using an experimental edge runtime, the API might change.
info  - Creating an optimized production build ..<w> [webpack.cache.PackFileCacheStrategy] Serializing big strings (176kiB) impacts deserialization performance (consider using Buffer instead and decode when needed)
info  - Creating an optimized production build  
info  - Compiled successfully
warn  - Failed to copy traced files for /path/repo/.next/server/pages/api/og.js [Error: ENOENT: no such file or directory, open '/path/repo/.next/server/pages/api/og.js.nft.json'] {
  errno: -2,
  code: 'ENOENT',
  syscall: 'open',
  path: '/path/repo/.next/server/pages/api/og.js.nft.json'
}
info  - Collecting page data  
info  - Generating static pages (3/3)
info  - Finalizing page optimization  

Route (pages)                              Size     First Load JS
┌ ○ /                                      2.79 kB        81.5 kB
├ ○ /404                                   212 B            79 kB
└ ℇ /api/og                                0 B            78.8 kB
+ First Load JS shared by all              78.8 kB
  ├ chunks/framework-aefaf282dc32bbc7.js   45.7 kB
  ├ chunks/main-7f6b386ee2fd6a88.js        31.8 kB
  ├ chunks/pages/_app-ef9da0a6572b3989.js  243 B
  └ chunks/webpack-2369ea09e775031e.js     1.02 kB

ℇ  (Streaming)  server-side renders with streaming (uses React 18 SSR streaming or Server Components)
○  (Static)     automatically rendered as static HTML (uses no initial props)

Done in 8.30s.

Vercel build logs:

info  - Collecting page data...
--
17:07:06.457 | warn  - Failed to copy traced files for /vercel/path0/.next/server/pages/api/og.js [Error: ENOENT: no such file or directory, open '/vercel/path0/.next/server/pages/api/og.js.nft.json'] {
17:07:06.457 | errno: -2,
17:07:06.457 | code: 'ENOENT',
17:07:06.457 | syscall: 'open',
17:07:06.457 | path: '/vercel/path0/.next/server/pages/api/og.js.nft.json'
17:07:06.457 | }
17:07:06.513 | info  - Generating static pages (0/3)
17:07:06.641 | info  - Generating static pages (3/3)
17:07:06.652 | info  - Finalizing page optimization...
17:07:06.657 |  
17:07:06.686 | Route (pages)                              Size     First Load JS
17:07:06.686 | ┌ ○ /                                      2.79 kB        81.5 kB
17:07:06.687 | ├ ○ /404                                   212 B            79 kB
17:07:06.687 | └ ℇ /api/og                                0 B            78.8 kB
17:07:06.687 | + First Load JS shared by all              78.8 kB
17:07:06.687 | ├ chunks/framework-aefaf282dc32bbc7.js   45.7 kB
17:07:06.687 | ├ chunks/main-7f6b386ee2fd6a88.js        31.8 kB
17:07:06.687 | ├ chunks/pages/_app-ef9da0a6572b3989.js  243 B
17:07:06.687 | └ chunks/webpack-2369ea09e775031e.js     1.02 kB
17:07:06.688 |  
17:07:06.688 | ℇ  (Streaming)  server-side renders with streaming (uses React 18 SSR streaming or Server Components)
17:07:06.688 | ○  (Static)     automatically rendered as static HTML (uses no initial props)
17:07:06.688 |  
17:07:06.849 | Done in 15.41s.
17:07:07.109 | Collected static files (public/, static/, .next/static): 2.515ms
17:07:07.147 | Build Completed in /vercel/output [49s]

It's working on my side with "next": "^13.0.3-canary.4", Previous was: "next": "^13.0.1-canary.0",

balazsorban44 commented 2 years ago

It's working on my side with "next": "^13.0.3-canary.4",

Does this mean the issue is fixed now? :thinking:

I have no such logs as shown above using our latest canary either.

brightonmike commented 2 years ago

For me I am on 12.2.3 which apparently it supports: https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation

It doesn't work at all and upgrading to 13 isn't an option for my project (it's a vast codebase about to go live in a matter of 2/3 weeks). We're on Netlify so I'm wondering if that's why, although it also doesn't work locally.

balazsorban44 commented 2 years ago

@brightonmike see https://github.com/vercel/next.js/issues/41968#issuecomment-1313894948. Given the OP's repro and 12.2.3, it still works, both locally, and on Vercel. It's likely a Netlify-related issue and should be reported there.

Thisisjuke commented 2 years ago

Does this mean the issue is fixed now? :thinking:

I don't think it's fixed, just that the error does not create an internal 500 error anymore :thinking: ? I am ok with this solution on a short term: I can see my OG card in staging environment = my task is done atm. But not really confident to go live with hidden errors inside .next folder :crying_cat_face:

We're on Netlify so I'm wondering if that's why

I wish you good luck because their support will not necessarily be relevant on this kind of error: the support on the forum does not seem to be up to date on the subjects announced during the last nextJs conference... Fix your error localy and then try a deploy on Netlify, then a deploy on Vercel : if things are working out of the box on Vercel but break on Netlify, there is an error on Netlify side.

:warning: I was on Netlify before and switched to Vercel and then to a self hosted container : their Netlify functions (your pages/api/...) don't include all your dependencies out of the box.

brightonmike commented 2 years ago

@brightonmike see #41968 (comment). Given the OP's repro and 12.2.3, it still works, both locally, and on Vercel. It's likely a Netlify-related issue and should be reported there.

How do we explain it not working locally however? That's not going to be Netlify.

Thisisjuke commented 2 years ago

@brightonmike can you paste here the content of your /api/og.tsx please ?

I tried many things days ago I might be able to help you. Their are some CSS rules that are not availables and break your /api/og route (like some CSS gradients).

First thing to do is to create a clean repo and paste your content in /api/og.tsx. If it's working it may be a problem with another of your dependencies.

brightonmike commented 2 years ago

@brightonmike can you paste here the content of your /api/og.tsx please ?

I tried many things days ago I might be able to help you. Their are some CSS rules that are not availables and break your /api/og route (like some CSS gradients).

First thing to do is to create a clean repo and paste your content in /api/og.tsx. If it's working it may be a problem with another of your dependencies.

I was just going to do that and now it's suddenly working. I re-installed my dependancies without changing them so I suspect something there was not correct. Truly bizarre as that's the only thing that changed 🤷🏻‍♂️

balazsorban44 commented 2 years ago

But not really confident to go live with hidden errors inside .next folder :crying_cat_face:

@Thisisjuke can you help me understand this?

Given https://github.com/vercel/next.js/issues/42899#issuecomment-1314034895, I still cannot reproduce this, neither locally, nor on Vercel. :thinking:. Could you try deleting the .next folder locally before next build and re-deploy on Vercel without the build cache, to see if that makes a difference? Otherwise, a link/access to your deployment would be helpful so we can further investigate. :pray:

Thisisjuke commented 2 years ago

Hi, I created a branch on the reproduction repository: https://github.com/Thisisjuke/nextjs-og-next13-bug-reproduction/tree/repro/issue-42899

There is this warning during the build about this path ENOENT: no such file or directory, open '/path/nextjs-og-next13-bug-reproduction/.next/server/pages/api/og.js.nft.json :

warn  - Failed to copy traced files for /path/nextjs-og-next13-bug-reproduction/.next/server/pages/api/og.js [Error: ENOENT: no such file or directory, open '/path/nextjs-og-next13-bug-reproduction/.next/server/pages/api/og.js.nft.json'] {
  errno: -2,
  code: 'ENOENT',
  syscall: 'open',
  path: '/path/nextjs-og-next13-bug-reproduction/.next/server/pages/api/og.js.nft.json'
}
info  - Collecting page data  
info  - Generating static pages (3/3)
info  - Finalizing page optimization  

Route (pages)                              Size     First Load JS
┌ ○ /                                      2.79 kB        81.5 kB
├ ○ /404                                   212 B            79 kB
└ ℇ /api/og                                0 B            78.8 kB
+ First Load JS shared by all              78.8 kB
  ├ chunks/framework-aefaf282dc32bbc7.js   45.7 kB
  ├ chunks/main-7f6b386ee2fd6a88.js        31.8 kB
  ├ chunks/pages/_app-ef9da0a6572b3989.js  243 B
  └ chunks/webpack-2369ea09e775031e.js     1.02 kB

You can try it with :

balazsorban44 commented 2 years ago

Thanks, so using the reproduction, I could finally reproduce the issue (conclusion, always start with including a proper, minimal reproduction for faster resolution), here is a minimal version: https://github.com/balazsorban44/nextjs-42899

It seems to be an issue with experimental-edge enabled in the API route and using the output: "standalone" option, which was missing in the description's repro.

It's unrelated to @vercel/og.

balazsorban44 commented 2 years ago

Actually, this is a duplicate of #39275, so closing in favor of that. :+1:

github-actions[bot] commented 1 year ago

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.