CODEWITHSUNDEEP
gatsby
SOLO
SOLO

Reputation: 868

Gatsby won't render images in Markdown but everything else works

I'm trying to use Gatsby to stand up a small website to render Markdown-based pages. It mostly works, but I can't get it to display images. Notably, the exact same Gatsby project (downloaded from the same git repo, no local modifications) works fine for others on my team. So it's something about my local config, but I'm out of ideas on where to look.

The example.md file from the repo looks like this:

[a bunch of text]

![](img/image.png)

[a bunch more text]

When I try to run a gatsby develop, I get the following error:

...
info changed file at .../example.md
success createPages - 0.021s

 ERROR 

Processing .../image.png failed

Original error:




  WorkerError: Processing .../image.png failed
  Original error:

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

  - next_tick.js:68 process._tickCallback
    internal/process/next_tick.js:68:7


not finished run queries - 0.224s
not finished Generating image thumbnails - 0.201s

(sharp:89899): GLib-CRITICAL **: 17:00:41.183: g_hash_table_lookup: assertion 'hash_table != NULL' failed

(sharp:89899): GLib-CRITICAL **: 17:00:41.194: g_hash_table_lookup: assertion 'hash_table != NULL' failed

(sharp:89899): GLib-CRITICAL **: 17:00:41.270: g_hash_table_lookup: assertion 'hash_table != NULL' failed

3-18-2020 devusr $

However, if I change the Markdown to

[a bunch of text]

img/image.png FIXME LATER

[a bunch more text]

then gatsby develop results in the site rendering just fine (with the obvious exception of it not displaying the actual image).

I have tried doing gatsby clean followed by gatsby develop. I've also updated node and npm, plus everything being managed by npm and homebrew. A ticket with sharp about a similar error just said the problem isn't with them, and didn't have much additional information to use to keep searching. What else can I do here?

Upvotes: 0

Views: 651

Answers (2)

Dawid Gorczyca
Dawid Gorczyca

Reputation: 991

The issue has recently made it to official gatsby channel here

This pull request should help to resolve it in the future

This is a temporary solution I used in the build process (Dockerfile) whilst waiting for the pull request to make it all the way up to Gatsby

Upvotes: 0

SOLO
SOLO

Reputation: 868

A. van Hugten was on the right track in the comments.

Looking more closely at the GitHub issue linked there, I found a few alternate solutions that worked for various people. I had to do two of them together before my problem was solved. Either one alone didn't fix anything.

Solution, part 1 of 2:

Edit gatsby-node.js and append the following:

const sharp = require('sharp')

sharp.cache(false)
sharp.simd(true)

Solution, part 2 of 2:

Run the following on the command line:

rm -rf node_modules
rm package-lock.json
npm cache clear --force
npm cache clean --force
npm install
gatsby clean
gatsby develop

I'm not using yarn so I didn't have a yarn.lock file, but if you do, you may need to remove it at the same time as package-lock.json. Also npm cache clear and npm cache clean are aliases of each other so only one should be needed, but I was paranoid.

A side effect of the above solution is that pages being served by Gatsby no longer automatically refresh on change. I have to manually stop Gatsby and do another gatsby develop to load changes. But it's better than nothing running at all.

Upvotes: 3

Related Questions