{"record":{"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":2047,"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":2029,"sourceCodeEnd":2065,"githubUrl":"https://github.com/vitejs/vite/blob/b4d66fee14d970f45b8a6f3d7d6aee73ca9b88ab/packages/vite/src/node/plugins/css.ts#L2029-L2065","documentation":"Thrown when loading the PostCSS config (postcss.config.js / .postcssrc) fails for a reason other than 'no config found'. css.ts:2038 calls `postcssrc`; if the rejection's message does not include 'No PostCSS Config found', the error is rethrown with a prefix. The line-2047 branch covers the rare case where the rejection value is not an Error instance (e.g. a string or object thrown manually).","triggerScenarios":"A syntax error in postcss.config.js, an import/require failure inside it (e.g. referencing an uninstalled PostCSS plugin like tailwindcss/autoprefixer), or a thrown non-Error value. `postcssrc(...).catch` wraps Errors with name/message/stack; non-Error rejections hit line 2047.","commonSituations":"Referencing `require('tailwindcss')` in postcss.config.js without installing it. Syntax error in the config after editing. Using ESM/CJS mismatch (config is `.mjs` but uses `module.exports`). A plugin throws a plain string instead of an Error. Node version incompatibility with a PostCSS plugin.","solutions":["Install missing PostCSS plugins named in the config: `npm install -D tailwindcss autoprefixer postcss-preset-env`.","Open postcss.config.js and fix the syntax/import error; the wrapped message shows the original stack.","Match the config file's module format to your project (`type: module` -> use export default).","Temporarily rename/disable postcss.config.js to confirm it is the source.","Update the offending PostCSS plugin to a Node-compatible version."],"exampleFix":"// before: postcss.config.js\nmodule.exports = { plugins: [require('tailwindcss')] } // tailwindcss not installed\n\n// after\n// $ npm install -D tailwindcss\nmodule.exports = { plugins: [require('tailwindcss')] }","handlingStrategy":"try-catch","validationCode":"import { postcssrc } from 'postcss-load-config'\nasync function validatePostcssConfig(root: string) {\n  try {\n    await postcssrc({}, root)\n  } catch (e: any) {\n    if (!String(e?.message ?? '').includes('No PostCSS Config found')) {\n      throw new Error(`PostCSS config is broken: ${e.message}`)\n    }\n  }\n}\n// await validatePostcssConfig(process.cwd()) before build","typeGuard":null,"tryCatchPattern":"try {\n  await build()\n} catch (e) {\n  if (e instanceof Error && /Failed to load PostCSS config/.test(e.message)) {\n    console.error('PostCSS config error. Open postcss.config.js; install named plugins; fix syntax.')\n    // optionally: rename postcss.config.js to skip and retry\n  }\n  throw e\n}","preventionTips":["Install every plugin referenced in postcss.config.js as a devDependency.","Match the config module format to your package.json `type` field.","Validate PostCSS config in CI with a small node script before running vite build."],"tags":["css","postcss","config","dependencies"],"backgroundTag":null,"analyzedSha":"b4d66fee14d970f45b8a6f3d7d6aee73ca9b88ab","analyzedAt":"2026-08-11T11:49:19.515Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-23T08:17:48.524Z"}