It appears like Gatsby is misconfigured. Gatsby related `gra

Error message

It appears like Gatsby is misconfigured. Gatsby related `graphql` calls are supposed to only be evaluated at compile time, and then compiled away. Unfortunately, something went wrong and the query was left in the compiled code.

Unless your site has a complex or custom babel/Gatsby configuration this is likely a bug in Gatsby.

What it means

Thrown by the graphql() function in gatsby-browser-entry.js. This function is a placeholder/stub that should be replaced at compile time by Gatsby's Babel plugin — graphql tag calls are compiled into static query result lookups. If the function executes at runtime, it means the Babel transform did not strip/replace the graphql call, indicating a misconfigured build.

Source

Thrown at packages/gatsby/cache-dir/gatsby-browser-entry.js:6

import loader from "./loader"

const prefetchPathname = loader.enqueue

function graphql() {
  throw new Error(
    `It appears like Gatsby is misconfigured. Gatsby related \`graphql\` calls ` +
      `are supposed to only be evaluated at compile time, and then compiled away. ` +
      `Unfortunately, something went wrong and the query was left in the compiled code.\n\n` +
      `Unless your site has a complex or custom babel/Gatsby configuration this is likely a bug in Gatsby.`
  )
}

export { default as PageRenderer } from "./public-page-renderer"
export { useScrollRestoration } from "gatsby-react-router-scroll"
export {
  Link,
  withPrefix,
  withAssetPrefix,
  navigate,
  parsePath,
} from "gatsby-link"

export { graphql, prefetchPathname }

View on GitHub (pinned to 8b06340921)

Solutions

Remove or simplify custom babel.config.js / .babelrc — let Gatsby's default Babel config handle the graphql tag.
Ensure graphql queries are co-located in files under src/ that go through Gatsby's Babel pipeline, not imported from external packages.
If using a custom webpack config, verify the Babel loader includes the Gatsby preset for all JS/TS files with graphql tags.
Run `gatsby clean` and rebuild to ensure no stale compiled output persists.

Example fix

// before — custom .babelrc overrides Gatsby preset
{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

// after — extend Gatsby's babel config instead
// .babelrc or babel.config.js
module.exports = {
  ...require('babel-preset-gatsby'),
  // add only your extra plugins here
}

Defensive patterns

Strategy: validation

Prevention

Do not override Gatsby's Babel preset without extending it — use `babel-preset-gatsby` as a base.
Keep all graphql tagged queries in files under src/ processed by Gatsby's Babel pipeline.
Avoid importing graphql queries from node_modules packages.
Run `gatsby clean` after changing Babel config to clear stale compiled output.

When it happens

Trigger: A graphql tagged-template call survives into the browser bundle. This happens when the Gatsby Babel preset/plugin is not applied to the file containing the graphql call — e.g. the file is outside the normal src directory, a custom babel.config.js overrides Gatsby's preset, or a third-party dependency contains a graphql tag.

Common situations: Custom babel.config.js that removes or reorders @babel/preset-react / the Gatsby preset, importing a graphql query from a node_modules package that Gatsby doesn't transform, or using a non-standard build setup (custom webpack config that bypasses the Babel pipeline).

Related errors

AI-assisted analysis of gatsbyjs/gatsby@8b06340921 (2026-08-13). Data as JSON: /api/errors/50426dec554b1050. Report an issue: GitHub.