Marie-Anne Melis

Wordpress and Joomla developer, learning new stuff

Some technical problems while developing my wp headless gatsby blog

As a developer you try to put something online without any errors or warnings.

My development environment consists of :

  • HP Laptop with Windows 10 home edition
  • Webstorm
  • NPM

I tried a lot of starters for headless wp with graphql/gatsby and ditched them because they generated warnings. And I wondered why I got these warnings and when I looked at these starters online, nothing was wrong. That has cost me a lot of time, hours, days…..

Eventually I decided to create my blog from scratch with the basic gatsby starter:

– gatsby new blog gatsbyjs/gatsby-starter-blog

And added the graphql wp library

– npm install gatsby-source-wordpress

Everything was warning free, so far so good, and I started creating templates, pages and components.

React-Helmet problems

It went well until I got to SEO and more specifically react-helmet. That’s when the warnings appeared in the developer tool:

  • react-hot-loader: react-dom-patch is not detected
  • componentWillMount has been renamed etc.

I used the source code from Raquel M Smith as a reference to see how she had done some things, and the source code from the ladybug podcast to see what they were using (developed recently). Warning free react-helmet, but how?

I googled a lot, found solutions, I guess I am not experienced enough to implement the solutions correctly, long story short I thought “let warnings be warnings at the moment, let’s try to get this to production as soon as possible and see what happens”.

Deploy to production anyway

So a few days ago I decided it was time to put the first version online and guess what, only the gatsby-image intervention warning stayed and the others were gone. Should I worry? The other thing I am not sure about, development Firefox gives a service worker error, production is ok (the error in firefox development mentions that) but I have no idea how to solve it. Same story, I googled some, tried the proposed solution, it didn’t work.

The big question is, do I have a problem, should I wait until some modules are upgraded or is it just my development environment.

Time will tell.

What I learned from this expedition

  • do not move to the next starter when you see these warnings, it consumes a lot of time (but you see a lot of starters :-))
  • a warning in development does not mean production will fail (or show the same warnings)
  • version management is a big thing
  • windows home edition makes installing Docker impossible