search

progital / gatsby-wpgraphql-inline-images

Solution for Gatsby and WPGraphQL sourced content. Downloads images locally.
MIT License
35 stars 12 forks source link

Gifs stop ContentParser working on a page #18

Closed robmarshall closed 4 years ago

robmarshall commented 5 years ago

The point at which URLs are converted only works on HTTPS

https://github.com/progital/gatsby-wpgraphql-inline-images/blob/bdf7c290ca6c19d68cb18900a16db29f9c95962e/src/contentParser.js#L62

It may be better to use:

let elementUrlNoProtocol = elementUrl.replace(/(^\w+:|^)\/\//,'')

Thoughts?

progital commented 5 years ago

Hey Rob! I use this package in my local environment that has http://mydomain.localhost urls with no issues. So I'm pretty sure it works with at least some http urls. What are your urls? Could you check them against my regex at https://regex101.com?

robmarshall commented 5 years ago

Check your URLs, I'm not sure it does work on your localhost. Chrome doesn't mind if you load unsecure images on local browser. Only blocks it on live sites.

robmarshall commented 5 years ago

Hmm, I just checked your regex and all seems fine. I'll run some more checks my end. Not sure what is happening!

robmarshall commented 5 years ago

I am going through your plugin line by line and cannot work out why it is not working.

At the point where the URLs are mapped over, it can see the images, but at the point of setting them to the map, there is nothing in the map at the end of the loop.

https://github.com/progital/gatsby-wpgraphql-inline-images/blob/bdf7c290ca6c19d68cb18900a16db29f9c95962e/src/sourceParser.js#L170

I am also using images that are not hosted on the site. Not sure if that is maybe throwing up an issue.

This is the repo I am working from: https://github.com/robmarshall/tns-gatsby

I will keep looking, but it is really confusing me!

robmarshall commented 4 years ago

I have finally worked this out.

If the image is a gif, content parsing for that particular page crashes, and reverts back to the older image. This also seems to happen if the original image cannot be found (it shows the hosted image, rather than the DLed image. But it also kills all other images on the page.

progital commented 4 years ago

Should be fixed in 66a7b50972a54767be83acfa1372ae17bdf4e0d9

henrikwirth commented 4 years ago

Heya, I have the same happening to me. The weird thing is, that it only happens, on the GitLab CI building the page.

When I run develop or build locally it works, but not through the CI ...

Node-Conainer used: node:12.13.1

FAILED to download https://mydomain.xyz/wp-content/uploads/2020/01/Agora.gif

Failed sourceParser at post-slug-name TypeError: Cannot read property 'contentDigest' of undefined
  at copyToStatic (/builds/project/node_modules/gatsby-wpgraphql-inline-images/src/utils.js:110:50)
  at /builds/project/node_modules/gatsby-wpgraphql-inline-images/src/sourceParser.js:139:26
  at runMicrotasks (<anonymous>)
  at processTicksAndRejections (internal/process/task_queues.js:93:5)
  at async Promise.all (index 1)
  at async sourceParser (/builds/project/node_modules/gatsby-wpgraphql-inline-images/src/sourceParser.js:126:3)
  at async /builds/project/node_modules/gatsby-wpgraphql-inline-images/src/createResolvers.js:59:25
  at async Promise.all (index 4)
  at async Promise.all (index 4)
  at async Promise.all (index 1)
  at async Promise.all (index 0)
  at async Promise.all (index 0)
  at async module.exports (/builds/project/create/createPosts.js:205:3)
  at async Object.exports.createPagesStatefully (/builds/project/gatsby-node.js:59:3)
progital commented 4 years ago

@henrikwirth I had random errors when one image was used several times on the page (or pages) and the script tried to copy it multiple times at the same time. It broke nothing though because it did get copied at least once and everything worked. This issue could be something similar - a racing condition / async processing issue.