`useStaticQuery` errors when `gatsby-plugin-feed` has a query and `gatsby-plugin-mdx` is used (Error: The result of this StaticQuery could not be fetched.)

liana-p commented 3 years ago

Preliminary Checks

[X] This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
[X] This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

I am getting this error:

success Building static HTML for pages - 0.298s - 31/31 104.04/s
warn gatsby-plugin-mdx
[object Object]
⠙ Caching JavaScript and CSS webpack compilation
⠋ Caching HTML renderer compilation
⠦ onPostBuild

 ERROR

UNHANDLED REJECTION The result of this StaticQuery could not be fetched.

This is likely a bug in Gatsby and if refreshing the page does not fix it, please open an issue in
https://github.com/gatsbyjs/gatsby/issues

  Error: The result of this StaticQuery could not be fetched.
  This is likely a bug in Gatsby and if refreshing the page does not fix it, please open an issue in https://gith
  ub.com/gatsbyjs/gatsby/issues

  - gatsby-browser-entry.js:77 useStaticQuery
    /Users/liana/projects/liana-website/.cache/caches/gatsby-plugin-mdx/webpack/webpack:/my-website/.cache/gatsby
    -browser-entry.js:77:11

  - configOptions.js:4 useThemeUiConfig
    [my-website]/[gatsby-plugin-theme-ui]/src/hooks/configOptions.js:4:30

  - provider.js:9 Root
    [my-website]/[gatsby-plugin-theme-ui]/src/provider.js:9:41

  - react-dom-server.node.production.min.js:33 d
    [my-website]/[react-dom]/cjs/react-dom-server.node.production.min.js:33:495

  - react-dom-server.node.production.min.js:36 bb
    [my-website]/[react-dom]/cjs/react-dom-server.node.production.min.js:36:16

  - react-dom-server.node.production.min.js:42 a.b.render
    [my-website]/[react-dom]/cjs/react-dom-server.node.production.min.js:42:41

  - react-dom-server.node.production.min.js:41 a.b.read
    [my-website]/[react-dom]/cjs/react-dom-server.node.production.min.js:41:75

  - react-dom-server.node.production.min.js:51 exports.renderToStaticMarkup
    [my-website]/[react-dom]/cjs/react-dom-server.node.production.min.js:51:437

  - wrap-root-render-html-entry.js:17 __WEBPACK_DEFAULT_EXPORT__
    [my-website]/[gatsby-plugin-mdx]/utils/wrap-root-render-html-entry.js:17:30

  - render-html.js:73
    [liana-website]/[gatsby-plugin-mdx]/utils/render-html.js:73:23

  - Array.map

  - render-html.js:71
    [liana-website]/[gatsby-plugin-mdx]/utils/render-html.js:71:22

  - Compiler.js:425 finalCallback
    [liana-website]/[webpack]/lib/Compiler.js:425:32

  - Compiler.js:489
    [liana-website]/[webpack]/lib/Compiler.js:489:17

  - HookWebpackError.js:68
    [liana-website]/[webpack]/lib/HookWebpackError.js:68:3

not finished Caching JavaScript and CSS webpack compilation - 2.387s
not finished Caching HTML renderer compilation - 1.213s
not finished onPostBuild - 0.905s

The error is coming from code inside gatsby-plugin-mdx in the gatsby-browser-entry.js file

This started happening specifically after a commit where I migrated from remark to mdx. I added the mdx plugin and removed the remark one. You can see that the error happens from some code inside the mdx plugin.

Fixes I have tried (from the other very long threads of people having similar issues:

gatsby clean, remove node modules, change node version, tried yarn and npm
Checked file case sensitivity. I never named any files with caps anyway, but just in case I renamed my files that were using static queries to a different name to make sure it doesn't affect it
Tried both the inline useStaticQuery, the version in a separate hook function, and the <StaticQuery> component
Tried to delete all my static queries, the error still comes, so the existence of my other static queries (which are from the starter template and worked fine until now) doesn't affect it
Tried removing the gatsby-plugin-graphql-codegen plugin as I saw a thread mentioning it as an issue
tried upgrading gatsby version

Basically nothing worked. There are many threads about the same issue, for some people just clearing the cache worked, for some others nothing did. What I do know is that for me everything was fine until I started using the mdx plugin.

Then I noticed that the gatsby-plugin-feed in the config had a static query inside (again, this is from the official blog template so I didn't even write this myself) and I remembered seeing something about how there can't be two queries in one page.

I tried commenting out the whole plugin and it worked. So there is an issue that only happens with the mdx plugin.

I don't really have more details than that and I don't know why the mdx plugin causes this error while remark was fine, my only assumption is that having the query in the field plugin causes two static queries to happen and breaks something.

Posting my gatsby-config.js to help figure out the issue:

module.exports = {
  siteMetadata: {
    title: `[edited]`,
    author: {
      name: `[edited]`,
      summary: `[edited]`,
    },
    description: `[edited]`,
    siteUrl: `[edited]`,
    social: {
      twitter: `nialnaa`,
    },
  },
  plugins: [
    `gatsby-plugin-image`,
    // `gatsby-remark-source-name`,
    {
      resolve: "gatsby-plugin-theme-ui",
      options: {
        preset: "@theme-ui/preset-deep",
      },
    },
    // `gatsby-plugin-graphql-codegen`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/pages`,
        name: `pages`,
      },
    },
    // {
    //   resolve: `gatsby-plugin-theme-ui`,
    //   options: {
    //     // preset: "@hackclub/theme",
    //   },
    // },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/blog`,
        name: `blog`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        extensions: [".md", ".mdx"],
        gatsbyRemarkPlugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 630,
            },
          },
          {
            resolve: `gatsby-remark-responsive-iframe`,
            options: {
              wrapperStyle: `margin-bottom: 1.0725rem`,
            },
          },
          `gatsby-remark-prismjs`,
          `gatsby-remark-copy-linked-files`,
          `gatsby-remark-smartypants`,
        ],
      },
    },
    // `gatsby-remark-reading-time`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        trackingId: `[edited]`,
      },
    },
    // {
    //   resolve: `gatsby-plugin-feed`,
    //   options: {
    //     query: `
    //       {
    //         site {
    //           siteMetadata {
    //             title
    //             description
    //             siteUrl
    //             site_url: siteUrl
    //           }
    //         }
    //       }
    //     `,
    //     feeds: [
    //       {
    //         serialize: ({ query: { site, allMdx } }) => {
    //           return allMdx.nodes.map(node => {
    //             return Object.assign({}, node.frontmatter, {
    //               description: node.excerpt,
    //               date: node.frontmatter.date,
    //               url: site.siteMetadata.siteUrl + node.fields.slug,
    //               guid: site.siteMetadata.siteUrl + node.fields.slug,
    //               custom_elements: [{ "content:encoded": node.html }],
    //             })
    //           })
    //         },
    //         query: `
    //           {
    //             allMdx(
    //               sort: { order: DESC, fields: [frontmatter___date] },
    //             ) {
    //               nodes {
    //                 excerpt
    //                 html
    //                 fields {
    //                   slug
    //                 }
    //                 frontmatter {
    //                   title
    //                   date
    //                 }
    //               }
    //             }
    //           }
    //         `,
    //         output: "/rss.xml",
    //       },
    //     ],
    //   },
    // },
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `Gatsby Starter Blog`,
        short_name: `GatsbyJS`,
        start_url: `/`,
        background_color: `#ffffff`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
      },
    },
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-gatsby-cloud`,
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // `gatsby-plugin-offline`,
  ],
}

My static queries in the rest of the code are the default ones from the blog template, and even completely removing them from the codebase makes this bug still happens so I think the code is irrelevant, this config alone will break things.

Reproduction Link

https://github.com/gatsbyjs/gatsby/issues/24902

Steps to Reproduce

run gatsby build
see error

Expected Result

The build works

Actual Result

The build errors

Environment

System:
    OS: macOS 11.4
    CPU: (8) arm64 Apple M1
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.6.2 - ~/.nvm/versions/node/v16.6.2/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.20.3 - ~/.nvm/versions/node/v16.6.2/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 92.0.4515.131
    Firefox: 90.0.2
    Safari: 14.1.1
  npmPackages:
    gatsby: ^3.11.1 => 3.11.1 
    gatsby-plugin-feed: ^3.11.0 => 3.11.0 
    gatsby-plugin-gatsby-cloud: ^2.11.0 => 2.11.0 
    gatsby-plugin-google-analytics: ^3.11.0 => 3.11.0 
    gatsby-plugin-graphql-codegen: ^3.0.0 => 3.0.0 
    gatsby-plugin-image: ^1.11.0 => 1.11.0 
    gatsby-plugin-manifest: ^3.11.0 => 3.11.0 
    gatsby-plugin-mdx: ^2.11.0 => 2.11.0 
    gatsby-plugin-offline: ^4.11.0 => 4.11.0 
    gatsby-plugin-react-helmet: ^4.11.0 => 4.11.0 
    gatsby-plugin-sharp: ^3.11.0 => 3.11.0 
    gatsby-plugin-theme-ui: ^0.10.1 => 0.10.1 
    gatsby-remark-copy-linked-files: ^4.8.0 => 4.8.0 
    gatsby-remark-images: ^5.8.0 => 5.8.0 
    gatsby-remark-prismjs: ^5.8.0 => 5.8.0 
    gatsby-remark-responsive-iframe: ^4.8.0 => 4.8.0 
    gatsby-remark-smartypants: ^4.8.0 => 4.8.0 
    gatsby-remark-source-name: ^1.0.0 => 1.0.0 
    gatsby-source-filesystem: ^3.11.0 => 3.11.0 
    gatsby-transformer-sharp: ^3.11.0 => 3.11.0

Config Flags

No response

liana-p commented 3 years ago

Linking relevant other issues in case my discovery about the feed plugin helps someone:

LekoArts commented 3 years ago

Hi!

Sorry to hear you're running into an issue. To help us best begin debugging the underlying cause, it is incredibly helpful if you're able to create a minimal reproduction. This is a simplified example of the issue that makes it clear and obvious what the issue is and how we can begin to debug it.

The feed plugin doesn't have a static query so it can't be the reason for what you're seeing.

theowenyoung commented 3 years ago

Same error, I think the error is happened at html field. I don't know why now.

LekoArts commented 3 years ago

Hi!

Since we didn't receive an answer for 7 days or more about the ask of a reproduction I'm going to close this now, as we can't do much to help without a reproduction. If you are able to create a minimal reproduction for this then please do answer here or open a new issue with a reproduction. Thanks!

jsg2021 commented 3 years ago

Here's my reproduction: https://github.com/jsg2021/gatsby-staticquery-error-repro npm start runs just fine. npm run build fails.

bru170 commented 3 years ago

I am also getting the same error and can't solve it properly. The only way I can get around this is by running npx gatsby clean every few changes.....

satya-nutella commented 2 years ago

Facing the exact same issue. Using plugin-mdx with plugin-feed seems to cause this error. Commenting out the feed in gatsby-config.js file makes the error disappear. I'm running the latest Gatsby version

jsg2021 commented 2 years ago

Mixing gatsby-plugin-mdx and gatsby-plugin-feed trigger this

satya-nutella commented 2 years ago

@LekoArts I think this issue should be reopened. The original author seems to have provided the reproduction link. I have also been facing the same issue here likely due to something going wrong by mixing the plugin-mdx and the plugin-feed.

gatsbyjs / gatsby