Problem with cwebp module and accessing drupal image field data with Gatsby image sharp plugin

[nizz0k]

Description

I’m trying to build a blog site with Drupal as a backend. The issue I’m having is accessing the image field data in the Gatsby component. I’ve been following the Lullabot and Code Karate tutorials. The issue is that if I use a regular tag, I can access and load the image in a query and successfully load it into the page.

However, using the Gatsby component, I started to get issues with the image object getting passed to the image module as undefined. After updating my code and accessing the image with a slightly modified query I started getting errors

Based on searching the Gatsby issue queue I think it's related to 9818, but I didn't find a solution there and the issue has been dead but open(?) since November last year.

Steps to reproduce

1. Install Gatsby default starter.
2. Add the 'image,' 'sharp,' 'transformer,' and 'source drupal' plugins
3. Add code to the 'gatsby-node' file to create pages from a Drupal content type.
4. create a template to format those page.
5. Attempt to add the image via html img tag works.
6. Modify to use the Gatsby Image component and the 'develop' command fails.

Expected result

For the component to display an image
What should happen?

Actual result

Develop fails to create development build

` ERROR

UNHANDLED REJECTION Processing /mnt/c/Projects/www/portfolio-site/.cache/gatsby-source-filesystem/73044fcefc7fd765a0deaff6c4440f59/adult-business-communication-1181605.jpg failed

Original error:
/mnt/c/Projects/www/portfolio-site/node_modules/cwebp-bin/vendor/cwebp: error while loading shared libraries: libGL.so.1: cannot open shared object file: No such file or directory

WorkerError: Processing /mnt/c/Projects/www/portfolio-site/.cache/gatsby-source-filesystem/73044fcefc7fd765a0deaff6c44 40f59/adult-business-communication-1181605.jpg failed
Original error:
/mnt/c/Projects/www/portfolio-site/node_modules/cwebp-bin/vendor/cwebp: error while loading shared libraries: libGL.so .1: cannot open shared object file: No such file or directory

• jobs-manager.js:314 exports.enqueueJob
  [portfolio-site]/[gatsby]/dist/utils/jobs-manager.js:314:23

(sharp:5090): GLib-CRITICAL **: 20:46:53.317: g_hash_table_lookup: assertion 'hash_table != NULL' failed`

Environment

WSSL on Win10.

System:
OS: Linux 4.4 Ubuntu 18.04.4 LTS (Bionic Beaver)
CPU: (4) x64 Intel(R) Core(TM) i7-7500U CPU @ 2.70GHz
Shell: 4.4.20 - /bin/bash
Binaries:
Node: 10.19.0 - /usr/bin/node
npm: 6.14.2 - /usr/bin/npm
Languages:
Python: 2.7.17 - /usr/bin/python
npmPackages:
gatsby: ^2.19.41 => 2.19.41
gatsby-image: ^2.2.43 => 2.2.43
gatsby-paginate: ^1.1.1 => 1.1.1
gatsby-plugin-manifest: ^2.2.47 => 2.2.47
gatsby-plugin-offline: ^3.0.40 => 3.0.40
gatsby-plugin-react-helmet: ^3.1.23 => 3.1.23
gatsby-plugin-sass: ^2.1.30 => 2.1.30
gatsby-plugin-sharp: ^2.4.12 => 2.4.12
gatsby-source-drupal: ^3.3.25 => 3.3.25
gatsby-source-filesystem: ^2.1.54 => 2.1.54
gatsby-transformer-sharp: ^2.3.18 => 2.3.18
npmGlobalPackages:
gatsby-cli: 2.11.7

[smthomas]

@nizz0k Thanks for the report. I am using gatsby-source-drupal with the Gatsby Image component on multiple sites and am not currently seeing this error. It makes me wonder if it's specific to your Drupal site (perhaps a specific configuration or module that is causing the problem). Is there anyway for you to help get me access to a copy of your Drupal site or could you help create a Minimal Reproduction? - https://www.gatsbyjs.org/contributing/how-to-make-a-reproducible-test-case/

[nizz0k]

Hi @smthomas. Thanks and thanks for the videos. You're right, I think the underlying issue is the environment, which is on WSL. The LibGL error led me to this post here:, which had the same error. I have an update D8 site running on a LAMP server in WSL, with an up to date Node install for Gatsby. I haven't tried a build since tinkering with installing LibGL on the WSL Ubuntu set with the ImageSharp fragments, but I think I'm close with this. I'll report back shortly. Sorry to spam your YouTube comments.

[nizz0k]

Installing LibGL manually solved the issue.