vercel/next.js · error

The "sassOptions.functions" option is not supported when usi

Error message

The "sassOptions.functions" option is not supported when using Turbopack. Custom Sass functions are only available with webpack. Please remove the "functions" property from your sassOptions in ${configFileName}.

What it means

Turbopack does not implement custom Sass functions (the `sassOptions.functions` API), which is a webpack/sass-only feature. When `process.env.TURBOPACK` is set and `functions` is present in sassOptions, config normalization throws, pointing at the config file name. This prevents silent loss of the custom functions.

Source

Thrown at packages/next/src/server/config.ts:506

    }
  }

  if (
    result.experimental?.allowDevelopmentBuild &&
    process.env.NODE_ENV !== 'development'
  ) {
    throw new Error(
      `The experimental.allowDevelopmentBuild option requires NODE_ENV to be explicitly set to 'development'.`
    )
  }

  // Validate sassOptions.functions is not used with Turbopack
  if (
    process.env.TURBOPACK &&
    result.sassOptions &&
    'functions' in result.sassOptions
  ) {
    throw new Error(
      `The "sassOptions.functions" option is not supported when using Turbopack. ` +
        `Custom Sass functions are only available with webpack. ` +
        `Please remove the "functions" property from your sassOptions in ${configFileName}.`
    )
  }

  // Validate experimental.cssChunking compatibility with the active bundler. Graph mode is
  // Turbopack-only; strict mode and `false` (single-chunk-per-module) are webpack-only.
  // Only validate during build/dev — `next start` doesn't pick a bundler and would otherwise
  // see `process.env.TURBOPACK` unset and reject a valid `cssChunking: "graph"` config.
  if (phase !== PHASE_PRODUCTION_SERVER && phase !== PHASE_INFO) {
    const cssChunkingValue = result.experimental.cssChunking
    const cssChunkingMode = resolveCssChunkingMode(cssChunkingValue)
    if (cssChunkingMode === 'graph' && !process.env.TURBOPACK) {
      throw new Error(
        `\`experimental.cssChunking: "graph"\` is only supported with Turbopack. ` +
          `Please remove the option or run Next.js with Turbopack in ${configFileName}.`
      )

View on GitHub (pinned to 0ae8c72462)

Solutions

  1. Remove the `functions` property from sassOptions when using Turbopack
  2. Move the logic that needed custom functions into a preprocessor step (e.g. a build script that generates SCSS), or into CSS variables / JS
  3. Run with webpack instead: `next build --webpack` (only if custom functions are essential)

Example fix

// before
module.exports = {
  sassOptions: { functions: { 'myColor($c)': (c) => c } }
}
// after
module.exports = {
  sassOptions: { includePaths: ['./styles'] }
}
Defensive patterns

Strategy: validation

Validate before calling

const isTurbopack = Boolean(process.env.TURBOPACK)
if (isTurbopack && sassOptions?.functions) {
  delete sassOptions.functions // or migrate the logic
}

Type guard

const hasSassFunctions = (o: unknown): o is { functions: Record<string, unknown> } =>
  typeof o === 'object' && o !== null && 'functions' in o

Prevention

When it happens

Trigger: Setting `sassOptions: { functions: { ... } }` and running `next dev`/`next build` with Turbopack (default bundler in this version). Detected by checking `process.env.TURBOPACK`.

Common situations: Upgrading to a Next.js version where Turbopack is the default. Migrating a project that relied on custom Dart Sass functions for theme color math. Using a shared sassOptions object across webpack and Turbopack projects.

Related errors


AI-assisted analysis of vercel/next.js@0ae8c72462 (2026-08-06). Data as JSON: /api/errors/0e68058bc6ae380c. Report an issue: GitHub.