gatsby-plugin-robots-txt | Based on mdreizin/gatsby-plugin-robots-txt

CSS modules in Gatsby v3 onwards needs to be imported as ES modules, so your:

After some debugging, the issue seems to be related to the Contentful source plugin (gatsby-source-contentful) according to some GitHub threads and to the capability to create internal IDs for tag node (tags___NODE).

Aside of waiting the resolution you can try updating the plugin to the latest version.

but i dont know what is the node version on github actions i can not reproduce the error in my local, because of the version are not the same

You could use setup-node action to make the version exactly same with your local:

Try running gatsby clean first, and then try it again…

There's not much debug in the question however, to me, it seems that you are using some dependencies outside React's scope, which may potentially block React's hydration process, which may explain the problem described. For example, using Leaflet instead of React's Leaflet or (depending on its implementation) Bootstrap instead of React's Boostrap.

You should be able to change all React-unfriendly modules to React's ones without too much effort and that should fix your problems.

Keep in mind that if your project "work in develop and breaks in build" doesn't mean that your project work or stops working, it just means that is working under certain and specific circumstances. Basically, and summarizing (to avoid extending the answer), gatsby develop uses the browser as an interpreter, where there are, among other things, global objects like window or document. However, gatsby build occurs in the Node server, where at the build time, there are not global objects because there are not even created yet, that the main reason why you may face a different behavior between both scenarios but doesn't mean that the project stopped working magically.

You can read further details in the Overview of Gatsby Build Process.

Another option, linked with blocking React's hydration, is that some component may be blocking that process because of its own behavior. Be careful when using global objects like window or document (or when importing modules that uses it), they use should be always be wrapped inside the following condition, as you can see from the docs:

When referencing window in a React component.

What did you try so far? As @ksav pointed out, in this GitHub thread there are a several ways to fix a similar issue:

• Removing node_modules, .cache and install again
• Removing node_modules, .cache fix Gatsby to v2.23.3/upgrade up to ^2.26.1 where the bug is fixed and install again

It seems related to a loading staticQuery bug that can't be reproduced in a fresh install. The final trial is to remove your package-lock/yarn-lock.json and generate it again.

Smoking Gun was a plugin I was using

"embla-carousel" "embla-carousel-react"

Rolled them back and issues went away, raising an issue on github for the team

I am more interested in how do you call those images in your components rather than in the package.json (it doesn't seem a dependencies issue) because inspecting the code, it seems that you've added the /static path which is not required. As it is shown in the following screenshot:

Regarding the updates coming from the comments below, we've figured out that the issue is related directly to this GitHub issue where apparently images retrieved by a markdown are blurring. What solves the issue is to pass a withWebp parameter in Gatsby's configuration, so in gatsby-config.js:

I had the same issue. Updating gatsby-plugin-netlify-cms to latest version helped.