{"id":"d27392b13c600a17","repo":"vitejs/vite","slug":"failed-to-load-postcss-config-e","errorCode":null,"errorMessage":"Failed to load PostCSS config: ${e}","messagePattern":"Failed to load PostCSS config: (.+?)","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/vite/src/node/plugins/css.ts","lineNumber":2044,"sourceCode":"    delete options.plugins\n    result = {\n      options,\n      plugins: inlineOptions.plugins || [],\n    }\n  } else {\n    const searchPath =\n      typeof inlineOptions === 'string' ? inlineOptions : config.root\n    const stopDir = searchForWorkspaceRoot(config.root)\n    result = postcssrc({}, searchPath, { stopDir }).catch((e) => {\n      if (!e.message.includes('No PostCSS Config found')) {\n        if (e instanceof Error) {\n          const { name, message, stack } = e\n          e.name = 'Failed to load PostCSS config'\n          e.message = `Failed to load PostCSS config (searchPath: ${searchPath}): [${name}] ${message}\\n${stack}`\n          e.stack = '' // add stack to message to retain stack\n          throw e\n        } else {\n          throw new Error(`Failed to load PostCSS config: ${e}`)\n        }\n      }\n      return null\n    })\n    // replace cached promise to result object when finished\n    result.then(\n      (resolved) => {\n        postcssConfigCache.set(config, resolved)\n      },\n      () => {\n        /* keep as rejected promise, will be handled later */\n      },\n    )\n  }\n\n  postcssConfigCache.set(config, result)\n  return result\n}","sourceCodeStart":2026,"sourceCodeEnd":2062,"githubUrl":"https://github.com/vitejs/vite/blob/89620f09afcfef6b35e7bb8660132ab5b4d0cd3b/packages/vite/src/node/plugins/css.ts#L2026-L2062","documentation":"Thrown when loading the PostCSS configuration fails for a reason other than 'no config found'. Vite runs `postcssrc()` to discover `postcss.config.js`; if the file exists but throws (syntax error, a referenced plugin not installed, an invalid export), the original error is re-thrown with a wrapper message identifying the search path.","triggerScenarios":"`postcssrc({}, searchPath, { stopDir })` rejects with an error whose message does not include 'No PostCSS Config found' — e.g. the config file has a syntax error, imports a missing module, or a PostCSS plugin constructor throws.","commonSituations":"A `postcss.config.js` with `module.exports = { plugins: { tailwindcss: {}, autoprefixer: {} } }` where `tailwindcss`/`autoprefixer` is not installed; a config written for ESM in a CJS project (or vice versa); a typo in the config; a plugin that throws on invalid options.","solutions":["Install the missing PostCSS plugin(s) named in the underlying error (`npm i -D tailwindcss autoprefixer`).","Fix any syntax/require errors in `postcss.config.js` / `.postcssrc.js`.","Ensure the config format matches your project's module system (`module.exports` for CJS, `export default` for ESM).","Temporarily rename the PostCSS config to confirm it is the culprit, then fix incrementally."],"exampleFix":"// before — postcss.config.js references uninstalled plugin\nmodule.exports = { plugins: { tailwindcss: {}, autoprefixer: {} } };\n// after — install and validate\n// npm i -D tailwindcss autoprefixer\nmodule.exports = { plugins: { tailwindcss: {}, autoprefixer: {} } };","handlingStrategy":"try-catch","validationCode":"import { existsSync, readFileSync } from 'node:fs';\nimport { pathToFileURL } from 'node:url';\n\nasync function validatePostcssConfig(file) {\n  if (!existsSync(file)) return;\n  // attempt to import it to surface syntax/missing-plugin errors early\n  await import(pathToFileURL(file).href);\n}\n// await validatePostcssConfig('postcss.config.js');","typeGuard":null,"tryCatchPattern":"try {\n  await build();\n} catch (e) {\n  if (/Failed to load PostCSS config/.test(e.message)) {\n    console.error('Check postcss.config.js plugins are installed:', e.cause ?? e);\n  }\n  throw e;\n}","preventionTips":["Install every PostCSS plugin referenced in the config as a real dependency.","Use the correct module syntax for your project's package type.","Validate the config imports in a prebuild step."],"tags":["css","postcss","config","dependency"],"analyzedSha":"89620f09afcfef6b35e7bb8660132ab5b4d0cd3b","analyzedAt":"2026-08-03T19:28:02.920Z","schemaVersion":2}