You're likely using a version of React that doesn't support

Error message

You're likely using a version of React that doesn't support Hooks
Please update React and ReactDOM to 16.8.0 or later to use the useStaticQuery hook.

What it means

Thrown by useStaticQuery when React.useContext is not a function, checked only in development mode. Gatsby's useStaticQuery hook relies on React's useContext Hook (available since React 16.8); if the installed React version is older and lacks Hooks, the call cannot work. The check is dev-only and is a legacy guard (marked TODO for removal in v5+).

Source

Thrown at packages/gatsby/cache-dir/static-query.js:60

      )}
    </StaticQueryContext.Consumer>
  )
}

StaticQuery.propTypes = {
  data: PropTypes.object,
  query: PropTypes.string.isRequired,
  render: PropTypes.func,
  children: PropTypes.func,
}

const useStaticQuery = query => {
  if (
    typeof React.useContext !== `function` &&
    process.env.NODE_ENV === `development`
  ) {
    // TODO(v5): Remove since we require React >= 18
    throw new Error(
      `You're likely using a version of React that doesn't support Hooks\n` +
        `Please update React and ReactDOM to 16.8.0 or later to use the useStaticQuery hook.`
    )
  }

  const context = React.useContext(StaticQueryContext)

  // query is a stringified number like `3303882` when wrapped with graphql, If a user forgets
  // to wrap the query in a grqphql, then casting it to a Number results in `NaN` allowing us to
  // catch the misuse of the API and give proper direction
  if (isNaN(Number(query))) {
    throw new Error(`useStaticQuery was called with a string but expects to be called using \`graphql\`. Try this:

import { useStaticQuery, graphql } from 'gatsby';

useStaticQuery(graphql\`${query}\`);
`)
  }

View on GitHub (pinned to 8b06340921)

Solutions

Upgrade React and ReactDOM to the latest stable version: `npm install react@latest react-dom@latest`.
Ensure no dependency forces an older React version — run `npm ls react` to check for conflicts.
Delete node_modules and lockfile, then reinstall to resolve version mismatches.
Verify Gatsby version compatibility — modern Gatsby (v5+) requires React 18+.

Example fix

// before — old React in package.json
"dependencies": {
  "react": "^16.7.0",
  "react-dom": "^16.7.0"
}

// after
"dependencies": {
  "react": "^18.2.0",
  "react-dom": "^18.2.0"
}

Defensive patterns

Strategy: validation

Validate before calling

// Verify React version supports Hooks at startup
function checkReactVersion() {
  const React = require('react')
  if (typeof React.useContext !== 'function') {
    throw new Error('React >= 16.8.0 required for useStaticQuery. Current: ' + React.version)
  }
}
checkReactVersion()

Type guard

// Type-level: declare minimum React version via package.json resolution
// Ensure package.json specifies:
// "react": ">=18.0.0", "react-dom": ">=18.0.0"
// and run: npm ls react  to detect conflicting versions

Prevention

Pin React and ReactDOM to >= 18.x in package.json for modern Gatsby.
Run `npm ls react` to detect version conflicts from transitive dependencies.
Delete node_modules and lockfile if version resolution is inconsistent.
Upgrade Gatsby alongside React — version compatibility is enforced by Gatsby's peer deps.

When it happens

Trigger: In development (NODE_ENV !== 'production'), useStaticQuery is called with a React version below 16.8 where React.useContext is undefined. typeof React.useContext !== 'function' evaluates true, and the error fires before useContext is even called.

Common situations: A project has an old React/ReactDOM version in package.json (e.g. React 16.7 or earlier), a dependency or Gatsby plugin pins an old React version causing a version conflict, or the lockfile resolved to a pre-Hooks React release. Modern Gatsby requires React >= 18, so this is increasingly rare.

Related errors

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