remix-run/remix · error · TypeError

files.globalTransforms[${index}] must define a transform() f

Error message

files.globalTransforms[${index}] must define a transform() function

What it means

Object-form entries in `files.globalTransforms` must include a callable `transform` function — the code that performs the transformation. This error fires when the entry is an object but `transform` is missing or not a function.

Source

Thrown at packages/assets/src/lib/files/config.ts:278

  let normalizedGlobalTransforms: ResolvedAssetGlobalTransform[] = []

  for (let [index, transform] of globalTransforms.entries()) {
    if (typeof transform === 'function') {
      normalizedGlobalTransforms.push({ transform })
      continue
    }

    if (transform === null || typeof transform !== 'object') {
      throw new TypeError(`files.globalTransforms[${index}] must be a function or object`)
    }

    if ('name' in transform && transform.name !== undefined && typeof transform.name !== 'string') {
      throw new TypeError(`files.globalTransforms[${index}].name must be a string`)
    }

    if (typeof transform.transform !== 'function') {
      throw new TypeError(`files.globalTransforms[${index}] must define a transform() function`)
    }

    normalizedGlobalTransforms.push({
      ...transform,
      extensions: normalizeTransformExtensions(
        transform.extensions,
        `files.globalTransforms[${index}].extensions`,
      ),
    })
  }

  let maxRequestTransforms = files.maxRequestTransforms ?? defaultMaxRequestTransforms
  if (!Number.isInteger(maxRequestTransforms) || maxRequestTransforms < 1) {
    throw new TypeError('files.maxRequestTransforms must be a positive integer')
  }

  if (files.cache !== undefined) {
    if (

View on GitHub (pinned to 9696913134)

Solutions

1. Add the function: `{ transform: minifyCss, extensions: ['.css'] }`
2. Check the import: use `import { minifyCss }` vs `import minifyCss from` as appropriate so you get the function, not a module namespace

Example fix

// before
files: { globalTransforms: [{ extensions: ['.css'] }] }
// after
files: { globalTransforms: [{ transform: minifyCss, extensions: ['.css'] }] }

files.globalTransforms?.forEach((t, i) => {
  if (typeof t === 'object' && t !== null && typeof t.transform !== 'function') {
    throw new Error(`globalTransforms[${i}] is missing transform()`)
  }
})

function isGlobalTransformDef(t: unknown): t is { transform: (...args: unknown[]) => unknown; name?: string; extensions?: string[] } {
  return !!t && typeof t === 'object' && typeof (t as any).transform === 'function'
}

When it happens

Trigger: `globalTransforms: [{ extensions: ['.css'] }]` where `transform` was omitted, or where `transform` holds a non-function (e.g. a string reference or imported non-function export).

Common situations: Object entries that only set options like `extensions` and forget the function; importing a default vs named export incorrectly so `transform` receives a module object; typos like `transforms:` inside a global-transform object.

Related errors

• files.transforms must be an object
• files.transforms.${name} must define a transform() function
• files.transforms.${name}.param must be true or "optional"
• files.globalTransforms must be an array
• files.globalTransforms[${index}] must be a function or objec

AI-assisted analysis of remix-run/remix@9696913134 (2026-08-27). Data as JSON: /api/errors/3692e92c05b65abc. Report an issue: GitHub.