Application deployed but with Errors 500 on pages where plaiceholder is used (missing sharp)

Describe the bug
Hi guys !
I have a simple static blog using NextJS 13. I use getStaticProps on all of my pages.
It works during development but the deployed application is broken : I have 500 error on pages where I use plaiceholder (rest of the website working well)

It’s Working well on Vercel so this should be something about sharp package or the build process on Netlify ?

  • It runs locally : next dev
  • It builds locally : next build
  • I can run this build : next start

To Reproduce
Steps to reproduce the behavior:

  1. Install plaiceholder for NextJS like this : Getting Started | Plaiceholder: Docs
  2. Add NextJS plugin like this : Next.js | Plaiceholder: Docs
  3. Create a base64 placeholder for an image inside getStaticProps
  4. Commit and then deploy using Netlify.
  5. Nothing displayed in Netlify console : build doing as usual
  6. Go to my live application : all page with placeholders are broken (500 status code)

Expected behavior

  • Error doing the build if something is missing

OR

  • Working next/image using plaiceholder and netlify

Additional context
I have check on others issues and reporting like:

Might be relative to sharp. I tried to add sharp on many places without success:
package.json

  "dependencies": {
   ...,
    "sharp": "^0.31.1",
   ...,
  },

netlify.toml

[functions]
  external_node_modules = ["sharp"]
  included_files = ["node_modules/sharp/**/*"]

[context.app]
  command = "yarn build"
  publish = ".next"

Thx for your time !

I don’t see any news about Next 13, I am assuming you mean Next 12?

Also, do you have a site that we can check this on?

Yes it’s a typo, it’s Next12.
I can’t send you any link because there is no working deploy + it’s not released at the moment on Netlify : all pages are in Error because all images are in error.

Additional information :
I have errors for each (3 on 3) of my /pages/api/ routes (routes displayed as functions inside Netlify dashboard).

  • api/revalidate : same error as described above → We are re-triggering a page build, so sharp is missing
  • /api/preview : missing front-end dependencies (non-sense because we are doing Simple nextJS preview as described in there documentation, just setting the preview cookie)
  • /api/exit-preview : missing front-end dependencies (same here)

It’s a Netlify issue : I deployed the exact same code on Vercel.com and it’s working perfectly fine.

Conclusion : there are missing dependencies in Netlify Functions/Edge Functions. Please can you tell me how to add all the dependencies of my package.json in my Netlify function ? The missing packages are all inside dependencies (sharp, @netlify/classnames-template-literals, etc.), not in devDependencies or peerDependencies

Thx for your time

Example of an error code in Netlify Functions :

Oct 20, 12:56:35 PM: c5071d58 ERROR  Unhandled Promise Rejection 	{"errorType":"Runtime.UnhandledPromiseRejection","errorMessage":"Error: Cannot find module '@netlify/classnames-template-literals'\nRequire stack:\n- /var/task/.next/server/pages/_app.js\n- /var/task/node_modules/next/dist/server/require.js\n- /var/task/node_modules/next/dist/server/next-server.js\n- /var/task/.netlify/functions-internal/_api_preview-handler/handlerUtils.js\n- /var/task/.netlify/functions-internal/_api_preview-handler/_api_preview-handler.js\n- /var/task/_api_preview-handler.js\n- /var/runtime/index.mjs","reason":{"errorType":"Error","errorMessage":"Cannot find module '@netlify/classnames-template-literals'\nRequire stack:\n- /var/task/.next/server/(node:internal/process/task_queues:97:32)"]}
Oct 20, 12:56:35 PM: c5071d58 Unknown application error occurred

We still need a site name to check this :slight_smile:

How are you getting these errors then? There must be some deploy, right?

Happy to check if you are willing to share the details, or else we’ve reached an impasse.

Details was shared above:

  • Here is the question I asked:
  • Here is my actual netlify.toml:

As said previously, it’s inside Netlify Functions (function tab inside Netlify Dashboard):

And above, there was the error i get inside the Netlify function tab:

I also have linked these ressources previously:

By details, I meant your site name or ID, or deploy ID, build ID, or any such unique identifiers. We really need to see the site to be able to comment on what could be happening. Not sure why you don’t want to share it.

Since you don’t wish to share that basic piece of information, I can only guess:

That was for the Sharp issue. But your error seems to be complaining about something else that’s missing. So, not sure how to go beyond this.

Hi folks

After something like a week of struggles, it’s seems impossible on my side to have everything I want on my Netlify Function : always missing a different dependency.

Has it works out of the box in Vercel, I switched the hosting provider to Vercel for a month and the client will deploy it next month in his own Dockerized infrastructure : if we need more packages in our pipelines / docker / functions, we will add it ourselves.

Now that we have updated ou NextJS 12.3 to Next 13, we are a little afraid that Netlify will take time to fix errors related to functions and edge functions (as well as to fully support Next 13 features, where the features are mainly in these functions).

Thx for your time

TLDR: if you have same issues like missing dependencies in functions, no solutions or answers in this thread :slight_smile:

Thanks for coming back and sharing this feedback with us. I have surfaced it to the appropriate teams.

Hi all,

I’m having the same issues with plaiceholder and sharp dependencies on a ISR enabled page.

Here’ some info to help you guys debug:

Deploy ID where I added sharp and plaiceholder as dependencies and it broke the /patch-notes page:
Deploy ID: 6389cd7928d6e60008bece29

I then later disabled ISR for that problematic page and it is working now, however it’d be great to be able to have ISR and still be able to use Plaiceholder on the page. Here’s the corresponding deployId: 6389d94fe4b40d00080e37ed

Has anyone figured out any solutions to this?

Thanks in advance.

update: sorry, I didn’t even bother to try adding the above to my netlify.toml. Just tried it now and redeployed. ISR and on-demand static page generation seems to be working now with plaiceholder :sunny: