vitejs/vite · error · Error

Unsupported dependency type: ${dep.type}

Error message

Unsupported dependency type: ${dep.type}

What it means

An exhaustiveness guard in the lightningcss dependency-replacement loop. After lightningcss analyzes a CSS file it returns dependencies typed as `external-url`/`glob-import`/`url`/`import`; the `default` branch (with `satisfies never`) throws if a dependency has any other type. A hit means the installed lightningcss version emits a dependency shape Vite does not recognize.

Source

Thrown at packages/vite/src/node/plugins/css.ts:3484

        }

        css = css.replace(
          dep.placeholder,
          // lightningcss always generates `url("placeholder")`
          // (`url('placeholder')`, `url(placeholder)` is not generated)
          // so escape double quotes
          () => replaceUrl.replaceAll('"', '\\"'),
        )
        break
      }
      case 'import': {
        // use a function replacer so `$` sequences in the URL are inserted
        // verbatim instead of being interpreted as replacement patterns
        css = css.replace(dep.placeholder, () => dep.url)
        break
      }
      default:
        throw new Error(
          `Unsupported dependency type: ${(dep satisfies never as any).type}`,
        )
    }
  }

  let modules: Record<string, string> | undefined
  if ('exports' in res && res.exports) {
    modules = {}
    // https://github.com/parcel-bundler/lightningcss/issues/291
    const sortedEntries = Object.entries(res.exports).sort((a, b) =>
      a[0].localeCompare(b[0]),
    )
    for (const [key, value] of sortedEntries) {
      modules[key] = value.name
      // https://lightningcss.dev/css-modules.html#class-composition
      for (const c of value.composes) {
        modules[key] += ' ' + c.name
      }

View on GitHub (pinned to 89620f09af)

Solutions

1. Align the `lightningcss` version with the one Vite depends on (check Vite's `package.json`).
2. Upgrade Vite to a release that supports your lightningcss version.
3. If pinning lightningcss yourself, downgrade/upgrade to match Vite's expected dependency types.

import { readFileSync } from 'node:fs';

function checkLightningcssCompat() {
  const vitePkg = JSON.parse(readFileSync('node_modules/vite/package.json','utf8'));
  const lcPkg = JSON.parse(readFileSync('node_modules/lightningcss/package.json','utf8'));
  // ensure lightningcss major matches vite's declared range
  console.log('vite lightningcss range:', vitePkg.dependencies?.lightningcss, 'installed:', lcPkg.version);
}
// checkLightningcssCompat();

When it happens

Trigger: A dependency object from `lightningcss`'s `transform`/`bundle` result has a `type` not in the handled set, reaching the `default` case of the switch.

Common situations: Version skew between Vite and `lightningcss` (a newer lightningcss added a new dependency type), or a manually pinned/patched lightningcss version emitting different shapes.

Related errors

• Unknown lang: ${lang}
• HTML proxy index in "${id}" not found
• base or replace is required
• Unsupported target "${e}"
• Unsupported target "${entry}"

AI-assisted analysis of vitejs/vite@89620f09af (2026-08-03). Data as JSON: /data/errors/36bf63f65ceeec71.json. Report an issue: GitHub.