Gatsby-source-wordpress-experimental: GIF's in inline html not supported

[jacobarriola]

Hey @TylerBarnes !

I'm upgrading from 0.1.8 -> 0.7.11 and am running into the following issue when running gatsby develop.

Other relative info:

• wp-graphql: 0.9.1
• wp-graphql-gutenberg: 0.3.4
• wp-gatsby: 0.4.1
• gatsby-plugin-sharp: 2.6.9
• gatsby: 2.22.11

The build works as expected when I set html: { useGatsbyImage: false } in my gatsby-config.js file.

How do I troubleshoot this?

Thanks!

...
success Downloading remote files - 26.968s - 7/7 0.26/s
success Downloading remote files - 40.323s - 9/9 0.22/s
success Downloading remote files - 73.046s - 15/15 0.21/s
success Downloading remote files - 47.556s - 12/12 0.25/s

 ERROR 

Expected positive integer for height but received NaN of type number



  Error: Expected positive integer for height but received NaN of type numbe  r

  - is.js:101 Object.invalidParameterError
    [***]/[sharp]/lib/is.js:101:10

  - resize.js:242 Sharp.resize
    [***]/[sharp]/lib/resize.js:242:18

  - index.js:321 generateBase64
    [***]/[gatsby-plugin-sharp]/index.js:321:12

  - index.js:388 cachifiedProcess
    [***]/[gatsby-plugin-sharp]/index.js:388:24

  - runMicrotasks

  - task_queues.js:62 runNextTicks
    internal/process/task_queues.js:62:5

  - timers.js:429 processImmediate
    internal/timers.js:429:9

  - index.js:396 async base64
    [***]/[gatsby-plugin-sharp]/index.js:396:12

  - index.js:581 async fluid
    [***]/[gatsby-plugin-sharp]/index.js:581:19

  - process-node.js:343 
    [***]/[gatsby-source-wordpress-experimental]/steps/source-nodes/create-nodes/process-node.js:343:23

  - async Promise.all

  - process-node.js:287 async replaceNodeHtmlImages
    [***]/[gatsby-source-wordpress-experimental]/steps/source-nodes/create-nodes/process-node.js:287:41

  - process-node.js:458 async processNodeString
    [***]/[gatsby-source-wordpress-experimental]/steps/source-nodes/create-nodes/process-node.js:458:18

  - process-node.js:494 async processNode
    [***]/[gatsby-source-wordpress-experimental]/steps/source-nodes/create-nodes/process-node.js:494:31

  - create-nodes.js:49 
    [***]/[gatsby-source-wordpress-experimental]/steps/source-nodes/create-nodes/create-nodes.js:49:12

  - index.js:256 async run
    [***]/[p-queue]/dist/index.js:256:29


warn  gatsby-source-wordpress  Page cG9zdDo5 couldn't process inline html
success  gatsby-source-wordpress  MediaItem - 1557.643s - fetched 364
success  gatsby-source-wordpress  creating nodes - 1557.663s - awaiting
success  gatsby-source-wordpress  fetching nodes - 1615.135s - 648 total
success Downloading remote files - 32.527s - 9/9 0.28/s

 ERROR 

Processing /Users/jacob/Documents/Projects/***/.cache/caches/gatsby-source-wordpress-experimental/b4fd999e1e44389818ff403b27c3c63c/lazy-placeholder.gif failed

Original error:
width has to be a positive int larger than zero (> 0), now it's 0



  WorkerError: Processing /Users/jacob/Documents/Projects/***/.cache/caches/gatsby-source-wordpress-experimental/b4fd999e1e44389818ff  403b27c3c63c/lazy-placeholder.gif failed
  Original error:
  width has to be a positive int larger than zero (> 0), now it's 0

  - jobs-manager.js:316 exports.enqueueJob
    [***]/[gatsby]/dist/utils/jobs-manager.js:316:23


not finished source and transform nodes - 1616.505s
not finished Generating image thumbnails - 1340.519s
not finished  gatsby-source-wordpress  fetch root fields - 1.316s
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! ***@1.0.0 develop: `NODE_TLS_REJECT_UNAUTHORIZED=0 gatsby develop`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the ***@1.0.0 develop script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/jacob/.npm/_logs/2020-06-24T18_25_15_986Z-debug.log

[TylerBarnes]

🤔 could you share your api that has this issue? Looks like it's improperly inferring/querying the height of an image in your html

[jacobarriola]

@TylerBarnes

could you share your api that has this issue?

You mean the /graphql endpoint? It's occurring on my local install atm since I'm testing updates. The endpoint on a public server is running older versions of wp-graphql, wp-gatsby and wp-graphql-gutenberg still.

[TylerBarnes]

@jacobarriola can you send me the /graphql endpoint of the live server? [email protected]
I can most likely still use that to debug this issue.

[TylerBarnes]

@jacobarriola it looks like I've neglected to handle GIF's in inline html! And that's causing the issue here. In addition there were a couple other small bugs that I've fixed in [email protected].

I'll be out of office (moving to a new city) from tomorrow til Monday so I wont be able to add .gif support this week. What you can do in the meantime is disable automatic gatsby-image in html with this option:

{
    options: {
        html: { useGatsbyImage: false }
    }
}

I also encountered a bunch of conflicting field issues coming from wp-graphql-gutenberg and I had to exclude/ignore those fields to get it to build. I believe these issues are fixed on the latest version of that extension, so you'll likely have to upgrade that as well.

Thanks for your patience and for opening this issue!

[TylerBarnes]

This should be fixed in [email protected]. Can you try it out and let me know?

[jacobarriola]

Thanks @TylerBarnes . I'll be trying this out in a bit.

[jacobarriola]

Looks good, @TylerBarnes. Thank you.

[TylerBarnes]

Great to hear! Thanks @jacobarriola !