{"record":{"id":"c4f283b81970fd3b","repo":"angular/angular-cli","slug":"attempted-to-load-invalid-postcss-plugin-plugi","errorCode":null,"errorMessage":"Attempted to load invalid Postcss plugin: \"${pluginName}\"","messagePattern":"Attempted to load invalid Postcss plugin: \"(.+?)\"","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/angular_devkit/build_angular/src/tools/webpack/configs/styles.ts","lineNumber":93,"sourceCode":"      });\n    },\n  });\n\n  const assetNameTemplate = assetNameTemplateFactory(hashFormat);\n\n  const extraPostcssPlugins: import('postcss').Plugin[] = [];\n\n  const searchDirectories = await generateSearchDirectories([projectRoot, root]);\n  const postcssConfig = await loadPostcssConfiguration(searchDirectories);\n\n  if (postcssConfig) {\n    const postCssPluginRequire = createRequire(path.dirname(postcssConfig.configPath) + '/');\n\n    for (const [pluginName, pluginOptions] of postcssConfig.config.plugins) {\n      const pluginMod = postCssPluginRequire(pluginName);\n      const plugin = pluginMod.__esModule ? pluginMod['default'] : pluginMod;\n      if (typeof plugin !== 'function' || plugin.postcss !== true) {\n        throw new Error(`Attempted to load invalid Postcss plugin: \"${pluginName}\"`);\n      }\n\n      extraPostcssPlugins.push(plugin(pluginOptions));\n    }\n  } else {\n    // Attempt to setup Tailwind CSS\n    // Only load Tailwind CSS plugin if configuration file was found.\n    // This acts as a guard to ensure the project actually wants to use Tailwind CSS.\n    // The package may be unknowningly present due to a third-party transitive package dependency.\n    const tailwindConfigPath = findTailwindConfiguration(searchDirectories);\n    if (tailwindConfigPath) {\n      let tailwindPackagePath;\n      try {\n        tailwindPackagePath = require.resolve('tailwindcss', { paths: [root] });\n      } catch {\n        const relativeTailwindConfigPath = path.relative(root, tailwindConfigPath);\n        logger.warn(\n          `Tailwind CSS configuration file found (${relativeTailwindConfigPath})` +","sourceCodeStart":75,"sourceCodeEnd":111,"githubUrl":"https://github.com/angular/angular-cli/blob/bb72145f9ab45aee29f523236b3a25cd0813a841/packages/angular_devkit/build_angular/src/tools/webpack/configs/styles.ts#L75-L111","documentation":"When a custom PostCSS configuration file is present, the styles webpack config requires each configured plugin and validates it is a genuine PostCSS plugin (a function with `plugin.postcss === true`). This error is thrown when a resolved plugin module fails that check, so webpack refuses to build with an invalid plugin entry.","triggerScenarios":"Having a `postcss.config.js`/`.json` in the project whose `plugins` map contains a name that resolves to a module that is not a PostCSS plugin — e.g. a typo'd plugin name resolving to an unrelated package, a plugin exported as `{ default: fn }` where default is not a function, or an object-style plugin definition unsupported here.","commonSituations":"Listing a package that was never installed (name resolving to the wrong module or failing expectations); passing a plugin as a plain object instead of via a factory function; upgrading a PostCSS plugin whose export shape changed (no `postcss: true` marker); misconfigured custom PostCSS config path in angular.json.","solutions":["Fix the plugin name/path in your postcss config so it resolves to the intended PostCSS plugin package (install it if missing).","Ensure the plugin is exported as a function with `postcss: true` (use `require('postcss-plugin')` not a wrapper object).","For ES-module/default exports, make sure the default export is the plugin function.","Remove invalid entries from the plugins map, or delete the postcss config to fall back to the built-in (Tailwind-aware) setup."],"exampleFix":"// before: postcss.config.js\nmodule.exports = { plugins: { 'autoprefixer': {}, 'some-random-pkg': {} } };\n// after\nmodule.exports = { plugins: { 'autoprefixer': {} } }; // only real PostCSS plugins","handlingStrategy":"validation","validationCode":"const plugin = require(pluginName);\nconst fn = plugin.__esModule ? plugin.default : plugin;\nif (typeof fn !== 'function' || fn.postcss !== true) {\n  throw new Error(`${pluginName} is not a valid PostCSS plugin`);\n}","typeGuard":"function isPostcssPlugin(mod: unknown): mod is ((...args: unknown[]) => unknown) & { postcss: true } {\n  const m = mod as { __esModule?: boolean; default?: unknown };\n  const plugin = (m && m.__esModule ? m.default : mod) as unknown;\n  return typeof plugin === 'function' && (plugin as { postcss?: boolean }).postcss === true;\n}","tryCatchPattern":null,"preventionTips":["Install every plugin listed in postcss.config (npm i autoprefixer postcss-import ...).","Verify plugin exports are functions marked with postcss: true after upgrades.","Pass plugins via factory functions, not raw objects, in the plugins map."],"tags":["angular","postcss","webpack","styles","plugin"],"backgroundTag":"invalid-postcss-plugin","analyzedSha":"bb72145f9ab45aee29f523236b3a25cd0813a841","analyzedAt":"2026-08-30T02:47:34.745Z","schemaVersion":2},"datasetVersion":"2026-08-30T03:17:51.788Z"}