{"record":{"id":"eed9ad08d8a9c845","repo":"vuejs/vue-cli","slug":"the-package-manager-has-hoisted-a-wrong-version-of","errorCode":null,"errorMessage":"The package manager has hoisted a wrong version of postcss, please run npm i postcss@8 -D to fix it.","messagePattern":"The package manager has hoisted a wrong version of postcss, please run npm i postcss@8 -D to fix it\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/@vue/cli-service/lib/config/css.js","lineNumber":69,"sourceCode":"    // if it doesn't, don't use postcss-loader for direct style imports\n    // because otherwise it would throw error when attempting to load postcss config\n    const hasPostCSSConfig = !!(loaderOptions.postcss || api.service.pkg.postcss || findExisting(api.resolve('.'), [\n      '.postcssrc',\n      '.postcssrc.js',\n      'postcss.config.js',\n      '.postcssrc.yaml',\n      '.postcssrc.json'\n    ]))\n\n    if (!hasPostCSSConfig) {\n      // #6342\n      // NPM 6 may incorrectly hoist postcss 7 to the same level of autoprefixer\n      // So we have to run a preflight check to tell the users how to fix it\n      const autoprefixerDirectory = path.dirname(require.resolve('autoprefixer/package.json'))\n      const postcssPkg = loadModule('postcss/package.json', autoprefixerDirectory)\n      const postcssVersion = postcssPkg.version\n      if (!semver.satisfies(postcssVersion, '8.x')) {\n        throw new Error(\n          `The package manager has hoisted a wrong version of ${chalk.cyan('postcss')}, ` +\n          `please run ${chalk.cyan('npm i postcss@8 -D')} to fix it.`\n        )\n      }\n\n      loaderOptions.postcss = {\n        postcssOptions: {\n          plugins: [\n            require('autoprefixer')\n          ]\n        }\n      }\n    }\n\n    // if building for production but not extracting CSS, we need to minimize\n    // the embbeded inline CSS as they will not be going through the optimizing\n    // plugin.\n    const needInlineMinification = isProd && !shouldExtract","sourceCodeStart":51,"sourceCodeEnd":87,"githubUrl":"https://github.com/vuejs/vue-cli/blob/7eb93c169c7520935252e2473387f923ef80d856/packages/@vue/cli-service/lib/config/css.js#L51-L87","documentation":"When there is no user postcss config, cli-service runs a preflight check: it resolves autoprefixer's directory, then loads the postcss package.json that autoprefixer sees, and verifies its version satisfies `8.x`. npm 6 could hoist postcss 7 next to autoprefixer, which breaks autoprefixer; the check fails fast with the exact fix command.","triggerScenarios":"postcss 7 (or other non-8.x) being the version autoprefixer resolves, typically due to npm 6 hoisting or conflicting postcss versions in the dependency tree.","commonSituations":"Fresh install on npm 6; a transitive dependency pinning postcss 7; mixing old css plugins with autoprefixer that needs postcss 8.","solutions":["Add postcss 8 explicitly: `npm i postcss@8 -D`.","Upgrade the package manager (npm 7+ hoists differently) or switch to yarn/pnpm.","Delete node_modules and the lockfile, then reinstall to resolve hoisting cleanly."],"exampleFix":null,"handlingStrategy":"validation","validationCode":"const semver = require('semver')\nconst v = require('postcss/package.json').version\nif (!semver.satisfies(v, '8.x')) {\n  throw new Error(`postcss ${v} resolved; run npm i postcss@8 -D`)\n}","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Pin `postcss@^8` in devDependencies to control hoisting.","Use npm 7+ or yarn/pnpm to avoid npm 6 hoisting postcss 7."],"tags":["postcss","dependency","hoisting","css"],"backgroundTag":null,"analyzedSha":"7eb93c169c7520935252e2473387f923ef80d856","analyzedAt":"2026-08-13T10:13:37.803Z","schemaVersion":2},"datasetVersion":"2026-08-13T14:17:21.547Z"}