I just added a blog to my project built in Gatsby. It works fine on ‘gatsby develop’, but when I try to build it, I get an error. It seems to be related to WordPress post’s featured image.
Build log part from VSCode:
warn `isModuleDeclaration` has been deprecated, please migrate to `isImportOrExportDeclaration`
at isModuleDeclaration (C:PROJEKTYmagianode_modules@babeltypeslibvalidatorsgeneratedindex.js:3940:35)
at PluginPass.Program (C:PROJEKTYmagianode_modulesbabel-plugin-lodashlibindex.js:102:44)
success Building production JavaScript and CSS bundles - 23.950s
⠋ Building Rendering Engines
[============================] 32.205 s 36/36 100% Running gatsby-plugin-sharp.IMAGE_PROCESSING jobs
<w> [webpack.cache.PackFileCacheStrategy] Serializing big strings (120kiB) impacts deserialization performance (consider using Buffer instead and decode when needed)
success Building Rendering Engines - 85.813s
success Building HTML renderer - 22.491s
success Execute page configs - 0.114s
success Validating Rendering Engines - 5.941s
success Caching Webpack compilations - 0.005s
ERROR #85928 GRAPHQL.QUERY_RUNNING
An error occurred during parallel query running.
Go here for troubleshooting tips: https://gatsby.dev/pqr-feedback
Error: Interface field WpConnectionType.nodes expected but WpEnqueuedScriptConnectionType does not provide it.
Interface field WpConnectionType.nodes expected but WpEnqueuedStylesheetConnectionType does not provide it.
Interface field WpConnectionType.nodes expected but WpActionMonitorActionConnectionType does not provide it.
Interface field WpConnectionType.nodes expected but WpPluginConnectionType does not provide it.
Interface field WpConnectionType.nodes expected but WpThemeConnectionType does not provide it.
- graphql-runner.ts:129 GraphQLRunner.validate
[magia]/[gatsby]/src/query/graphql-runner.ts:129:22
- graphql-runner.ts:218 GraphQLRunner.query
[magia]/[gatsby]/src/query/graphql-runner.ts:218:49
- query-runner.ts:140 queryRunner
[magia]/[gatsby]/src/query/query-runner.ts:140:14
not finished Running gatsby-plugin-sharp.IMAGE_PROCESSING jobs - 146.946s
not finished run queries in workers - 0.200s
This is my gatsby-node.js:
const path = require(`path`)
const { slash } = require(`gatsby-core-utils`)
exports.createPages = async ({graphql, actions }) => {
const { createPage } = actions
createPage({
path: "/using-dsg",
component: require.resolve("./src/templates/using-dsg.js"),
context: {},
defer: true,
})
// query content for WordPress posts
const {
data: {
allWpPost: { nodes: allPosts },
},
} = await graphql(`
query {
allWpPost {
nodes {
id
uri
title
content
excerpt
featuredImage {
node {
altText
localFile {
childImageSharp {
gatsbyImageData(
quality: 95
placeholder: BLURRED
width: 2000
)
}
}
}
}
}
}
}
`)
const postTemplate = path.resolve(`./src/templates/BlogPostTemplate.js`)
allPosts.forEach(post => {
createPage({
path: post.uri,
component: slash(postTemplate),
context: {
id: post.id,
title: post.title,
content: post.content,
excerpt: post.excerpt,
image: post.featuredImage.node.localFile.childImageSharp.gatsbyImageData,
alt: post.featuredImage.node.altText
},
})
})
}
This is my post template:
import React from "react"
import Layout from "../components/layout"
import Seo from "../components/seo"
import { GatsbyImage, getImage } from "gatsby-plugin-image"
import styled from 'styled-components'
const BlogPostTemplate = ({pageContext}) => {
const image = getImage(pageContext.image);
return(
<Layout headerColor='#1a1e23'>
<Wrap>
<GatsbyImage image={image} alt={pageContext.alt}/>
<Container dangerouslySetInnerHTML={{ __html: `<h1>${pageContext.title}</h1> ${pageContext.content}` }} />
</Wrap>
</Layout>
)
}
This is my package.json
{
"name": "gatsby-starter-default",
"private": true,
"description": "A simple starter to get up and developing quickly with Gatsby",
"version": "0.1.0",
"author": "Kyle Mathews <[email protected]>",
"dependencies": {
"babel-plugin-styled-components": "^2.0.7",
"gatsby": "^5.7.0",
"gatsby-image": "^3.11.0",
"gatsby-plugin-google-fonts-with-attributes": "^1.0.8",
"gatsby-plugin-google-gtag": "^5.7.0",
"gatsby-plugin-image": "^3.7.0",
"gatsby-plugin-manifest": "^5.7.0",
"gatsby-plugin-robots-txt": "^1.8.0",
"gatsby-plugin-sharp": "^5.7.0",
"gatsby-plugin-sitemap": "^6.7.0",
"gatsby-plugin-styled-components": "^6.7.0",
"gatsby-source-filesystem": "^5.5.0",
"gatsby-source-wordpress": "^7.7.0",
"gatsby-transformer-sharp": "^5.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"styled-components": "^5.3.6",
"universal-cookie": "^4.0.4"
},
"devDependencies": {
"prettier": "^2.8.3"
},
"keywords": [
"gatsby"
],
"license": "0BSD",
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"format": "prettier --write "**/*.{js,jsx,ts,tsx,json,md,css}"",
"start": "gatsby develop",
"serve": "gatsby serve",
"clean": "gatsby clean",
"test": "echo "Write tests! -> https://gatsby.dev/unit-testing" && exit 1",
"deploy": "gatsby clean && gatsy build && gatsby prepend && node deploy"
},
"repository": {
"type": "git",
"url": "https://github.com/gatsbyjs/gatsby-starter-default"
},
"bugs": {
"url": "https://github.com/gatsbyjs/gatsby/issues"
}
}
And finally my config file part:
module.exports = {
plugins: [
`gatsby-plugin-image`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `gatsby-starter-default`,
short_name: `starter`,
start_url: `/`,
background_color: `#663399`,
display: `minimal-ui`,
icon: `src/images/favicon.svg`,
},
},
{
resolve: `gatsby-source-wordpress`,
options: {
// Specify the URL of the WordPress source
url: `https://subdomain.domain.net/graphql`,
}
},
{
resolve: `gatsby-plugin-google-fonts-with-attributes`,
options: {
fonts: [
`Rubik:400,500,600,700,800,900`
],
display: "swap",
attributes: {
rel: "stylesheet preload prefetch",
},
},
},
{
resolve: `gatsby-plugin-google-gtag`,
options: {
trackingIds: [
"x",
],
pluginConfig: {
head: true,
respectDNT: true,
exclude: ["/preview/**", "/using-dsg", "/404", "/polityka-prywatnosci"],
},
},
},
{
resolve: `gatsby-plugin-sitemap`,
options: {
excludes: [`/using-dsg`, `/404`, `/polityka-prywatnosci`],
query: `
{
site {
siteMetadata {
siteUrl
}
}
allSitePage {
nodes {
path
}
}
}`,
resolveSiteUrl: () => siteUrl,
resolvePages: ({
allSitePage: { nodes: allPages },
//allWpContentNode: { nodes: allWpNodes },
}) => {
/*const wpNodeMap = allWpNodes.reduce((acc, node) => {
const { uri } = node
acc[uri] = node
return acc
}, {})*/
return allPages.map(page => {
return { ...page/*, ...wpNodeMap[page.path]*/ }
})
},
serialize: ({ path, modifiedGmt }) => {
return {
url: path,
lastmod: modifiedGmt,
}
},
resolveSiteUrl: ({ site }) => {
return site.siteMetadata.siteUrl
}
}
},
{
resolve: 'gatsby-plugin-robots-txt',
options: {
host: 'https://x.com',
sitemap: 'https://x/sitemap-index.xml',
policy: [{userAgent: '*', allow: '/'}]
}
},
'gatsby-plugin-styled-components'
]
}
I will be grateful for any kind of help. Have a nice day everyone!
2
Answers
Please try to downgrade WP Gatsby plugin in your WordPress from v1.14 to v1.13
It would also help if you update your ‘gatsby-node.js’ file to specify the fields you want to query for each type instead of the default behavior.
You can also try to update your Gatsby and WordPress plugins to the latest versions by running "npm update"
Hope this helps