skip to Main Content

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


  1. Please try to downgrade WP Gatsby plugin in your WordPress from v1.14 to v1.13

    Login or Signup to reply.
  2. 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

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search