Invalid REPL redirectTemplate specified: "${codepen.redirect

Error message

Invalid REPL redirectTemplate specified: "${codepen.redirectTemplate}"

What it means

In gatsby-remark-code-repls createPages (gatsby-node.js:31-35), after validating the directory exists, the plugin checks fs.existsSync(codepen.redirectTemplate). The redirectTemplate (merged from OPTION_DEFAULT_CODEPEN defaults and user-provided codepen options) must be a path to a React component file that serves as the redirect page template. If this file doesn't exist, reporter.panic fires.

Source

Thrown at packages/gatsby-remark-code-repls/src/gatsby-node.js:32

  { actions, reporter },
  {
    directory = OPTION_DEFAULT_REPL_DIRECTORY,
    codepen = OPTION_DEFAULT_CODEPEN,
  } = {}
) => {
  codepen = { ...OPTION_DEFAULT_CODEPEN, ...codepen }
  if (!directory.endsWith(`/`)) {
    directory += `/`
  }

  const { createPage } = actions

  if (!fs.existsSync(directory)) {
    reporter.panic(`Invalid REPL directory specified: "${directory}"`)
  }

  if (!fs.existsSync(codepen.redirectTemplate)) {
    reporter.panic(
      `Invalid REPL redirectTemplate specified: "${codepen.redirectTemplate}"`
    )
  }

  try {
    const files = await readdir(directory)
    if (files.length === 0) {
      console.warn(`Specified REPL directory "${directory}" contains no files`)

      return
    }

    // escape backslashes for windows
    const resolvedDirectory = resolve(directory)
    files.forEach(file => {
      if (extname(file) === `.js` || extname(file) === `.jsx`) {
        const parsedFile = parse(file)
        const relativeDir = parsedFile.dir.replace(`${resolvedDirectory}`, ``)

View on GitHub (pinned to 8b06340921)

Solutions

Create the redirect template file (a React component that renders the CodePen redirect form)
Point codepen.redirectTemplate to an existing component: codepen: { redirectTemplate: `${__dirname}/src/templates/codepen-redirect.js` }
Verify the path resolves correctly relative to cwd

Example fix

// before: redirectTemplate doesn't exist
options: {
  codepen: {
    redirectTemplate: `./src/templates/codepen-redirect.js`,
  },
}
// file doesn't exist → panic

// after: create the template file
// src/templates/codepen-redirect.js
import React from 'react'

export default function CodePenRedirect({ pageContext }) {
  return (
    <form action={pageContext.action} method="POST">
      <input type="hidden" name="data" value={pageContext.payload} />
    </form>
  )
}

Defensive patterns

Strategy: validation

Validate before calling

const fs = require('fs')
const path = require('path')

const templatePath = path.resolve(process.cwd(), options.codepen?.redirectTemplate)
if (!fs.existsSync(templatePath)) {
  throw new Error(`Redirect template not found: ${templatePath}`)
}
if (!templatePath.endsWith('.js') && !templatePath.endsWith('.jsx') && !templatePath.endsWith('.tsx')) {
  throw new Error(`Redirect template must be a .js/.jsx/.tsx file: ${templatePath}`)
}

Type guard

import fs from 'fs'

function isValidTemplateFile(filePath: string): boolean {
  return fs.existsSync(filePath) &&
    /\.(js|jsx|tsx)$/i.test(filePath)
}

Prevention

Create the redirect template component before configuring the plugin
Use absolute paths for codepen.redirectTemplate
Verify template file existence in a pre-build validation step

When it happens

Trigger: Using the default codepen.redirectTemplate path that doesn't exist in the project. Setting a custom redirectTemplate path that points to a non-existent file. The template file was moved or deleted.

Common situations: Not providing a redirectTemplate and the default path doesn't match the project structure. Moving the template file without updating the plugin config. Fresh setup where the template component hasn't been created yet.

Related errors

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