How exactly should I use Gatsby Image with SSR in Netlify?

Support
,
1

I’m trying to build a simple blog app with Gatsby and MDX. The app has a route /blog, which is a SSR page to handle pagination, search params, etc.

I’m fully aware that gatsby-transformer-sharp and StaticImage do not work in SSR environment on Netlify (more about that here). So I choose cloudinary as my image service and do not use local images anymore.

After configuring gatsby-source-cloudinary and gatsby-transformer-cloudinary, /blog page deployed to Netlify still crashes with the error:

Error: 
Something went wrong installing the "sharp" module

libvips-cpp.so.42: cannot open shared object file: No such file or directory

Possible solutions:
- Install with verbose logging and look for errors: "npm install --ignore-scripts=false --foreground-scripts --verbose sharp"
- Install for the current linux-x64 runtime: "npm install --platform=linux --arch=x64 sharp"
- Consult the installation documentation: https://sharp.pixelplumbing.com/install

...

Can anyone tell me how to configure this properly? Thanks

2

@richardnguyen99 I don’t have the answer to your questions, but just raising that these other threads also reference the same error message:

libvips-cpp.so.42: cannot open shared object file: No such file or directory

https://answers.netlify.com/t/images-are-not-showing-after-deploying-website/137915
https://answers.netlify.com/t/issue-with-sharp-module-on-netlify/137918

4

As stated, I visited all these threads you mentioned. I found out that Netlify does not support Gatsby Image with SSR environment (the link I mentioned above). So I migrated to one of the suggested solution from Netlify, which is Cloudinary.

However, even followed the official link, it still doesn’t work.

5

There’s no need to be so combative, I don’t work for Netlify.

I understand that Support Teams frequently fob people off but that’s not what my post is about, especially as I’m not a member of the Support Team.

I did read your entire message, I understand what your issue is, unfortunately I cannot answer it myself as I do not work with the same tooling, (I have no love for Gatsby), and I don’t have the spare time to investigate.

While you say “As stated, I visited all these threads you mentioned.” I’ve now read your original post multiple times and I see no evidence of that. I can’t have read something you didn’t write. But feel free to point out what I’ve missed.

If you read my own post carefully you’ll see that I didn’t make any suggestion that those threads contained an answer, as I was well aware they’re unsolved.

I linked to them so that when Netlify’s staff read your thread, they will see that it’s not only you that has encountered this particular error recently, and that they still haven’t responded with a solution in the other threads.

It will lend your own issue more weight, and perhaps get you a solution faster.

I also cross link so that if your thread is solved, but the others never are, that developers encountering them in future have a chance to crawl the back links to encounter the solution, (instead of them remaining dead ends forever).

Sorry I can’t be of further assistance, and if you manage to self-solve before Netlify respond it’d be great if you could post the answer here for others.

6

After a couple days trying to fix this, Netlify seems to use sharp module for no reason. My app completely purges all sharp and image plugins supported by Gatsby officially such as gatsby-plugin-image, gatsby-plugin-sharp, and gatsby-transformer-sharp. But the module still requires to be installed in my Netlify Function. Here is the complete log:

Feb 8, 02:04:45 PM: 90833ba3 Duration: 2025.95 ms	Memory Usage: 124 MB
Feb 8, 02:04:46 PM: INFO   Preparing Gatsby filesystem {
  from: '/var/task/.cache',
  to: '/tmp/gatsby/.cache',
  rewrites: [
    [ '/var/task/.cache/caches', '/tmp/gatsby/.cache/caches' ],
    [
      '/var/task/.cache/caches-lmdb',
      '/tmp/gatsby/.cache/caches-lmdb'
    ],
    [ '/var/task/.cache/data', '/tmp/gatsby/.cache/data' ]
  ]
}
Feb 8, 02:04:46 PM: INFO   directory already exists
Feb 8, 02:04:47 PM: error Uncaught Exception 	{"errorType":"Error","errorMessage":"\nSomething went wrong installing the \"sharp\" module\n\nlibvips-cpp.so.42: cannot open shared object file: No such file or directory\n\nPossible solutions:\n- Install with verbose logging and look for errors: \"npm install --ignore-scripts=false --foreground-scripts --verbose sharp\"\n- Install for the current linux-x64 runtime: \"npm install --platform=linux --arch=x64 sharp\"\n- Consult the installation documentation: https://sharp.pixelplumbing.com/install","stack":["Error: ","Something went wrong installing the \"sharp\" module","","libvips-cpp.so.42: cannot open shared object file: No such file or directory","","Possible solutions:","- Install with verbose logging and look for errors: \"npm install --ignore-scripts=false --foreground-scripts --verbose sharp\"","- Install for the current linux-x64 runtime: \"npm install --platform=linux --arch=x64 sharp\"","- Consult the installation documentation: https://sharp.pixelplumbing.com/install","    at Object.<anonymous> (/var/task/.cache/query-engine/index.js:295955:9)","    at __webpack_require__ (/var/task/.cache/query-engine/index.js:311896:42)","    at Object.defined (/var/task/.cache/query-engine/index.js:294775:1)","    at __webpack_require__ (/var/task/.cache/query-engine/index.js:311896:42)","    at Object.<anonymous> (/var/task/.cache/query-engine/index.js:294747:15)","    at __webpack_require__ (/var/task/.cache/query-engine/index.js:311896:42)","    at Object.<anonymous> (/var/task/.cache/query-engine/index.js:294735:18)","    at __webpack_require__ (/var/task/.cache/query-engine/index.js:311896:42)","    at Object.<anonymous> (/var/task/.cache/query-engine/index.js:294720:37)","    at __webpack_require__ (/var/task/.cache/query-engine/index.js:311896:42)","    at Object.<anonymous> (/var/task/.cache/query-engine/index.js:294226:43)","    at __webpack_require__ (/var/task/.cache/query-engine/index.js:311896:42)","    at Object.<anonymous> (/var/task/.cache/query-engine/index.js:293735:27)","    at __webpack_require__ (/var/task/.cache/query-engine/index.js:311896:42)","    at exports.__esModule (/var/task/.cache/query-engine/index.js:292810:28)","    at __webpack_require__ (/var/task/.cache/query-engine/index.js:311896:42)"]}
Feb 8, 02:04:47 PM: INIT_REPORT Init Duration: 1977.63 ms	Phase: invoke	Status: error	Error Type: Runtime.Unknown
Feb 8, 02:04:47 PM: Unknown application error occurred
Runtime.Unknown
Feb 8, 02:04:47 PM: bd5babe5 Duration: 2035.12 ms	Memory Usage: 124 MB

I decided to test it out on Vercel. Vercel also suffers the problem with installing sharp module. However, after purging all the sharp module and related dependencies for Gatsby, it works just fine.

For anyone who runs into these issues, I decide to go on with Vercel so I won’t investigate on this issue anymore. For Netlify engineers and support team, I hope you will take a look at this and resolve it. Thanks for reading.