gatsbyjs/gatsby · error

gatsby-plugin-page-creator_12109

gatsby-plugin-page-creator_12109

Error message

${e.message}

What it means

In gatsby-node.ts:255-275, the plugin sets up a file watcher on the pages directory. When a new file is added (addedPath callback), it calls the page creation logic. If any exception is thrown during that process (e.g. file parsing, slug generation, page creation), the catch block wraps it with id CODES.FileSystemAdd and passes e.message as the sourceMessage. The original error is surfaced through the structured panic context.

Source

Thrown at packages/gatsby-plugin-page-creator/src/gatsby-node.ts:273

      pagesGlob,
      addedPath => {
        try {
          if (!knownFiles.has(addedPath)) {
            createPage(
              addedPath,
              pagesDirectory,
              actions,
              graphql,
              reporter,
              trailingSlash,
              pagesPath,
              ignore,
              slugifyOptions
            )
            knownFiles.add(addedPath)
          }
        } catch (e) {
          reporter.panic({
            id: prefixId(CODES.FileSystemAdd),
            context: {
              sourceMessage: e.message,
            },
          })
        }
      },
      removedPath => {
        // Delete the page for the now deleted component.
        try {
          const componentPath = systemPath.join(pagesDirectory, removedPath)
          store.getState().pages.forEach(page => {
            if (page.component === componentPath) {
              deletePage({
                path: page.path,
                component: componentPath,
              })
            }

View on GitHub (pinned to 8b06340921)

Solutions

1. Read the e.message value in the error output — it contains the actual underlying error
2. Fix the syntax/parse error in the newly added file
3. Check file permissions on the pages directory
4. If using a custom slugify function, ensure it handles all file name patterns without throwing

Example fix

// before: a file with a syntax error triggers the panic during develop
// The error message will contain the actual parse error
// Fix the underlying file:

// src/pages/broken-page.js (had a syntax error)
// after: fix the syntax
export default function Page() {
  return <div>Fixed</div>
}

// The plugin already wraps file-add logic in try-catch internally.
// To guard as a consumer, validate your page components are syntactically
// valid before adding them to the pages directory during develop mode.
//
// Use a pre-commit hook or file watcher that runs a syntax check:
const { execSync } = require('child_process')
try {
  execSync(`npx eslint --no-eslintrc --parser-options=ecmaVersion:2020,sourceType:module,ecmaFeatures:{jsx:true} ${newFilePath}`, { stdio: 'pipe' })
} catch (e) {
  console.warn(`File ${newFilePath} has syntax issues — fix before saving to pages/`)
}

When it happens

Trigger: A file is added to the watched pages directory during develop mode but causes an error during processing — e.g. a syntax error in the component, a slug collision, a file system permission issue, or an error in a custom slugify function.

Common situations: Hot-reload during gatsby develop when a new file is saved with a syntax error. File permission issues on the pages directory. Custom slugifyOptions function that throws. File system race conditions during rapid file creation.

Related errors

• gatsby-plugin-page-creator_12110
• gatsby-plugin-page-creator_12108
• Error in gatsby-remark-code-repls plugin: cannot read
• starter ${starterPath} doesn't exist
• Couldn't find the specified offline inject script

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