vuejs/vue-cli · error · Error

The package manager has hoisted a wrong version of postcss,

Error message

The package manager has hoisted a wrong version of postcss, please run npm i postcss@8 -D to fix it.

What it means

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.

Source

Thrown at packages/@vue/cli-service/lib/config/css.js:69

    // if it doesn't, don't use postcss-loader for direct style imports
    // because otherwise it would throw error when attempting to load postcss config
    const hasPostCSSConfig = !!(loaderOptions.postcss || api.service.pkg.postcss || findExisting(api.resolve('.'), [
      '.postcssrc',
      '.postcssrc.js',
      'postcss.config.js',
      '.postcssrc.yaml',
      '.postcssrc.json'
    ]))

    if (!hasPostCSSConfig) {
      // #6342
      // NPM 6 may incorrectly hoist postcss 7 to the same level of autoprefixer
      // So we have to run a preflight check to tell the users how to fix it
      const autoprefixerDirectory = path.dirname(require.resolve('autoprefixer/package.json'))
      const postcssPkg = loadModule('postcss/package.json', autoprefixerDirectory)
      const postcssVersion = postcssPkg.version
      if (!semver.satisfies(postcssVersion, '8.x')) {
        throw new Error(
          `The package manager has hoisted a wrong version of ${chalk.cyan('postcss')}, ` +
          `please run ${chalk.cyan('npm i postcss@8 -D')} to fix it.`
        )
      }

      loaderOptions.postcss = {
        postcssOptions: {
          plugins: [
            require('autoprefixer')
          ]
        }
      }
    }

    // if building for production but not extracting CSS, we need to minimize
    // the embbeded inline CSS as they will not be going through the optimizing
    // plugin.
    const needInlineMinification = isProd && !shouldExtract

View on GitHub (pinned to 7eb93c169c)

Solutions

1. Add postcss 8 explicitly: `npm i postcss@8 -D`.
2. Upgrade the package manager (npm 7+ hoists differently) or switch to yarn/pnpm.
3. Delete node_modules and the lockfile, then reinstall to resolve hoisting cleanly.

const semver = require('semver')
const v = require('postcss/package.json').version
if (!semver.satisfies(v, '8.x')) {
  throw new Error(`postcss ${v} resolved; run npm i postcss@8 -D`)
}

When it happens

Trigger: 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.

Common situations: Fresh install on npm 6; a transitive dependency pinning postcss 7; mixing old css plugins with autoprefixer that needs postcss 8.

Related errors

• Cannot resolve "@vue/vue${vueVersion}-jest" module. Please m
• Cannot resolve "ts-jest" module. Typescript preset requires
• Require @vue/cli-service "${range}", but was loaded with "${
• Can't find ${packageName} in package.json
• Can't find ${packageName} in node_modules. Please install th

AI-assisted analysis of vuejs/vue-cli@7eb93c169c (2026-08-13). Data as JSON: /api/errors/eed9ad08d8a9c845. Report an issue: GitHub.