Error: Cannot find module 'sharp' in Netlify Function log with NextJS and previews

Support
1

Hey there!

My site name is staging--meggyweggyphotography.netlify.app. Unfortunately, the repo is private.

I’ve been slowly converting this website from Gatsby to NextJS, and have gotten it to the point where I’m testing out deploys. Everything is working very well in my staging branch deploy, but I get a 500 error whenever I try to launch into a preview from my CMS.

I’m using Prismic as my headless CMS, and have configured my preview routes according to their docs.

In the test that produced the log below, I went to Prismic and am trying to preview the /bookme route. On this page, I am generating a placeholder for my background image using the plaiceholder package inside getStaticProps.

If I test this locally by running a next build and then a next start, the preview loads just fine with no error. Using netlify dev loads the previews just fine as well. However, I’m not sure the requests are actually going through the local Netlify functions which is strange. This issue only comes up once it’s all deployed in Netlify.

Here is the Netlify function log on my most recent staging branch deploy:

Dec 2, 04:16:30 PM: e27d6223 ERROR  Error: Cannot find module 'sharp'
Dec 2, 04:16:30 PM: e27d6223 ERROR  Require stack:
Dec 2, 04:16:30 PM: e27d6223 ERROR  - /var/task/node_modules/plaiceholder/dist/index.js
Dec 2, 04:16:30 PM: e27d6223 ERROR  - /var/task/.next/server/pages/bookme.js
Dec 2, 04:16:30 PM: e27d6223 ERROR  - /var/task/node_modules/next/dist/server/require.js
Dec 2, 04:16:30 PM: e27d6223 ERROR  - /var/task/node_modules/next/dist/server/next-server.js
Dec 2, 04:16:30 PM: e27d6223 ERROR  - /var/task/.netlify/functions-internal/___netlify-handler/handlerUtils.js
Dec 2, 04:16:30 PM: e27d6223 ERROR  - /var/task/.netlify/functions-internal/___netlify-handler/___netlify-handler.js
Dec 2, 04:16:30 PM: e27d6223 ERROR  - /var/task/___netlify-handler.js
Dec 2, 04:16:30 PM: e27d6223 ERROR  - /var/runtime/index.mjs
Dec 2, 04:16:30 PM: e27d6223 ERROR      at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
Dec 2, 04:16:30 PM: e27d6223 ERROR      at Function.mod._resolveFilename (/var/task/node_modules/next/dist/build/webpack/require-hook.js:27:32)
Dec 2, 04:16:30 PM: e27d6223 ERROR      at Function.Module._load (node:internal/modules/cjs/loader:778:27)
Dec 2, 04:16:30 PM: e27d6223 ERROR      at Module.require (node:internal/modules/cjs/loader:1005:19)
Dec 2, 04:16:30 PM: e27d6223 ERROR      at require (node:internal/modules/cjs/helpers:102:18)
Dec 2, 04:16:30 PM: e27d6223 ERROR      at Object.<anonymous> (/var/task/node_modules/plaiceholder/dist/index.js:11:13)
Dec 2, 04:16:30 PM: e27d6223 ERROR      at Module._compile (node:internal/modules/cjs/loader:1105:14)
Dec 2, 04:16:30 PM: e27d6223 ERROR      at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
Dec 2, 04:16:30 PM: e27d6223 ERROR      at Module.load (node:internal/modules/cjs/loader:981:32)
Dec 2, 04:16:30 PM: e27d6223 ERROR      at Function.Module._load (node:internal/modules/cjs/loader:822:12) {
Dec 2, 04:16:30 PM: e27d6223 ERROR    code: 'MODULE_NOT_FOUND',
Dec 2, 04:16:30 PM: e27d6223 ERROR    requireStack: [
Dec 2, 04:16:30 PM: e27d6223 ERROR      '/var/task/node_modules/plaiceholder/dist/index.js',
Dec 2, 04:16:30 PM: e27d6223 ERROR      '/var/task/.next/server/pages/bookme.js',
Dec 2, 04:16:30 PM: e27d6223 ERROR      '/var/task/node_modules/next/dist/server/require.js',
Dec 2, 04:16:30 PM: e27d6223 ERROR      '/var/task/node_modules/next/dist/server/next-server.js',
Dec 2, 04:16:30 PM: e27d6223 ERROR      '/var/task/.netlify/functions-internal/___netlify-handler/handlerUtils.js',
Dec 2, 04:16:30 PM: e27d6223 ERROR      '/var/task/.netlify/functions-internal/___netlify-handler/___netlify-handler.js',
Dec 2, 04:16:30 PM: e27d6223 ERROR      '/var/task/___netlify-handler.js',
Dec 2, 04:16:30 PM: e27d6223 ERROR      '/var/runtime/index.mjs'
Dec 2, 04:16:30 PM: e27d6223 ERROR    ]
Dec 2, 04:16:30 PM: e27d6223 ERROR  }

I read another post here where it was suggested to add sharp to my netlify.toml file and install it as a dependency. This didn’t solve my issue though.

For reference here is my netlify.toml.

[context.production]
  command = "npm run build"
  publish = ".next"

[context.staging]
  command = "npm run build"
  publish = ".next" 

[functions]
  external_node_modules = ["sharp"]

[[plugins]]
  package = "@netlify/plugin-nextjs"

I’m thinking I may have missed something in the docs, or maybe this has already been explained elsewhere. I figure I can just conditionally call the getPlaiceholder function inside getStaticProps when previews are detected if needed. However, I mostly just curious as to why this might be happening.

Since this is preview related, I realize there’s not a ton you guys can do from your end to really test this. Hopefully, you can find something wrong with my process or give me some more tips!

Thanks!

2

This looks related:

3

If what @ hrishikesh suggests doesn’t work, try installing the sharp package via NPM, Yarn, etc.

That’s what fixed it for me.

4

Adding the included_files property with a value of ["node_modules/sharp/**/*"] solved the issue!

What’s funny is I had read that thread a day prior to writing my post and saw that the original poster had the property in their configuration file, but they had no success with it so I never tried it. Great timing that they responded!

@Kimfucious, I did install sharp first and had made sure to reference it in my netlify.toml under the external_node_modules property, but unfortunately had no luck. I had found that solution from a thread you had started actually! :slight_smile:

Thank you guys for the help!

My only question is why adding the external_node_modules property wasn’t enough to include it in the Netlify function deployment in this particular instance?

5

external_node_modules works differently than included_files. The former is used to make sure any dynamically imported Node Modules are forcefully bundled in your function bundle. Typically, this will only include the default exported file on the module. The latter however, especially in the format you’ve included, will force all files in that folder to be included in your bundle. Sharp, as you can guess, doesn’t only depend on a JS file to work (which would get included using the first option), but it also needs some of its files and binaries to work (which you need to include using included_files).

1 Like