Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

build throws "PostCSS plugin autoprefixer requires PostCSS 8" (alpha.6 regression)

See original GitHub issue

Version

5.0.0-alpha.6

Reproduction link

https://github.com/cexbrayat/alpha6-postcss8

Environment info

System:
    OS: macOS 11.2.2
    CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
  Binaries:
    Node: 12.20.1 - ~/.nvm/versions/node/v12.20.1/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.11 - ~/.nvm/versions/node/v12.20.1/bin/npm
  Browsers:
    Chrome: 89.0.4389.82
    Edge: Not Found
    Firefox: 85.0.2
    Safari: 14.0.3
  npmPackages:
    @vue/cli-overlay:  5.0.0-alpha.6
    @vue/cli-plugin-router:  5.0.0-alpha.6
    @vue/cli-plugin-unit-jest: ~5.0.0-alpha.6 => 5.0.0-alpha.6
    @vue/cli-plugin-vuex:  5.0.0-alpha.6
    @vue/cli-service: ~5.0.0-alpha.6 => 5.0.0-alpha.6
    @vue/cli-shared-utils:  5.0.0-alpha.6
    @vue/compiler-core:  3.0.7
    @vue/compiler-dom:  3.0.7
    @vue/compiler-sfc: ^3.0.4 => 3.0.7
    @vue/compiler-ssr:  3.0.7
    @vue/component-compiler-utils:  3.2.0
    @vue/preload-webpack-plugin:  1.1.2
    @vue/reactivity:  3.0.7
    @vue/runtime-core:  3.0.7
    @vue/runtime-dom:  3.0.7
    @vue/shared:  3.0.7
    @vue/test-utils: ^2.0.0-0 => 2.0.0-rc.3
    @vue/web-component-wrapper:  1.3.0
    jest-serializer-vue:  2.0.2
    typescript: ~4.1.2 => 4.1.5
    vue: ^3.0.4 => 3.0.7
    vue-hot-reload-api:  2.3.4
    vue-jest: ^5.0.0-0 => 5.0.0-alpha.8 (4.0.1)
    vue-loader:  16.1.2 (15.9.6)
    vue-style-loader:  4.1.3
    vue-template-es2015-compiler:  1.9.1
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

Create a new application with v5.0.0-alpha.6 (or use https://github.com/cexbrayat/alpha6-postcss8)

npx @vue/cli@next create alpha6-postcss8 -m npm --inlinePreset '{"useConfigFiles": true,"plugins": {"@vue/cli-plugin-unit-jest": {}},"vueVersion":"3"}'

Then try to build it

What is expected?

The app builds properly

What is actually happening?

ERROR  Failed to compile with 1 error                                                                                              

 error  in ./src/App.vue?vue&type=style&index=0&id=1de185ca&lang=css

Error: PostCSS plugin autoprefixer requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users

It looks like postcss v8 is not properly installed

npm list postcss

alpha6-postcss8@0.1.0 /Users/ced-pro/Code/test/vue-cli-tests/alpha6-postcss8
├─┬ @vue/cli-service@5.0.0-alpha.6
│ ├─┬ @vue/component-compiler-utils@3.2.0
│ │ └── postcss@7.0.35
│ ├─┬ css-loader@5.1.2
│ │ └── UNMET PEER DEPENDENCY postcss@8.2.8
│ ├─┬ cssnano@4.1.10
│ │ ├─┬ cssnano-preset-default@4.0.7
│ │ │ ├─┬ css-declaration-sorter@4.0.1
│ │ │ │ └── postcss@7.0.35  deduped
│ │ │ ├─┬ cssnano-util-raw-cache@4.0.1
│ │ │ │ └── postcss@7.0.35  deduped
│ │ │ ├── postcss@7.0.35  deduped
│ │ │ ├─┬ postcss-calc@7.0.5
│ │ │ │ └── postcss@7.0.35  deduped
│ │ │ ├─┬ postcss-colormin@4.0.3
│ │ │ │ └── postcss@7.0.35  deduped
│ │ │ ├─┬ postcss-convert-values@4.0.1
│ │ │ │ └── postcss@7.0.35  deduped
│ │ │ ├─┬ postcss-discard-comments@4.0.2
│ │ │ │ └── postcss@7.0.35  deduped
│ │ │ ├─┬ postcss-discard-duplicates@4.0.2
│ │ │ │ └── postcss@7.0.35  deduped
│ │ │ ├─┬ postcss-discard-empty@4.0.1
│ │ │ │ └── postcss@7.0.35  deduped
│ │ │ ├─┬ postcss-discard-overridden@4.0.1
│ │ │ │ └── postcss@7.0.35  deduped
│ │ │ ├─┬ postcss-merge-longhand@4.0.11
│ │ │ │ ├── postcss@7.0.35  deduped
│ │ │ │ └─┬ stylehacks@4.0.3
│ │ │ │   └── postcss@7.0.35  deduped
│ │ │ ├─┬ postcss-merge-rules@4.0.3
│ │ │ │ └── postcss@7.0.35  deduped
│ │ │ ├─┬ postcss-minify-font-values@4.0.2
│ │ │ │ └── postcss@7.0.35  deduped
│ │ │ ├─┬ postcss-minify-gradients@4.0.2
│ │ │ │ └── postcss@7.0.35  deduped
│ │ │ ├─┬ postcss-minify-params@4.0.2
│ │ │ │ └── postcss@7.0.35  deduped
│ │ │ ├─┬ postcss-minify-selectors@4.0.2
│ │ │ │ └── postcss@7.0.35  deduped
│ │ │ ├─┬ postcss-normalize-charset@4.0.1
│ │ │ │ └── postcss@7.0.35  deduped
│ │ │ ├─┬ postcss-normalize-display-values@4.0.2
│ │ │ │ └── postcss@7.0.35  deduped
│ │ │ ├─┬ postcss-normalize-positions@4.0.2
│ │ │ │ └── postcss@7.0.35  deduped
│ │ │ ├─┬ postcss-normalize-repeat-style@4.0.2
│ │ │ │ └── postcss@7.0.35  deduped
│ │ │ ├─┬ postcss-normalize-string@4.0.2
│ │ │ │ └── postcss@7.0.35  deduped
│ │ │ ├─┬ postcss-normalize-timing-functions@4.0.2
│ │ │ │ └── postcss@7.0.35  deduped
│ │ │ ├─┬ postcss-normalize-unicode@4.0.1
│ │ │ │ └── postcss@7.0.35  deduped
│ │ │ ├─┬ postcss-normalize-url@4.0.1
│ │ │ │ └── postcss@7.0.35  deduped
│ │ │ ├─┬ postcss-normalize-whitespace@4.0.2
│ │ │ │ └── postcss@7.0.35  deduped
│ │ │ ├─┬ postcss-ordered-values@4.1.2
│ │ │ │ └── postcss@7.0.35  deduped
│ │ │ ├─┬ postcss-reduce-initial@4.0.3
│ │ │ │ └── postcss@7.0.35  deduped
│ │ │ ├─┬ postcss-reduce-transforms@4.0.2
│ │ │ │ └── postcss@7.0.35  deduped
│ │ │ ├─┬ postcss-svgo@4.0.2
│ │ │ │ └── postcss@7.0.35  deduped
│ │ │ └─┬ postcss-unique-selectors@4.0.1
│ │ │   └── postcss@7.0.35  deduped
│ │ └── postcss@7.0.35  deduped
│ └── UNMET PEER DEPENDENCY postcss@8.2.8
└─┬ @vue/compiler-sfc@3.0.7
  └── UNMET PEER DEPENDENCY postcss@8.2.8

npm ERR! peer dep missing: postcss@^8.1.0, required by autoprefixer@10.2.5
npm ERR! peer dep missing: postcss@^8.1.0, required by icss-utils@5.1.0
npm ERR! peer dep missing: postcss@^8.1.0, required by postcss-modules-extract-imports@3.0.0
npm ERR! peer dep missing: postcss@^8.1.0, required by postcss-modules-local-by-default@4.0.0
npm ERR! peer dep missing: postcss@^8.1.0, required by postcss-modules-scope@3.0.0
npm ERR! peer dep missing: postcss@^8.1.0, required by postcss-modules-values@4.0.0
npm ERR! peer dep missing: postcss@^8.0.0, required by postcss-modules@4.0.0

Issue Analytics

State:
Created 3 years ago
Comments:9 (7 by maintainers)

Top GitHub Comments

1reaction

cexbrayatcommented, Mar 15, 2021

@sodatea It looks like, despite the fix, alpha.7 has the same issue with the exact same repro.

npm list poscss gives:

alpha7-postcss8@0.1.0 /Users/ced-pro/Code/test/vue-cli-tests/alpha7-postcss8
├─┬ @vue/cli-service@5.0.0-alpha.7
│ ├─┬ @vue/component-compiler-utils@3.2.0
│ │ └── postcss@7.0.35
│ ├─┬ css-loader@5.1.2
│ │ └── UNMET PEER DEPENDENCY postcss@8.2.8
│ ├─┬ css-minimizer-webpack-plugin@1.2.0
│ │ └─┬ cssnano@4.1.10
│ │   ├─┬ cssnano-preset-default@4.0.7
│ │   │ ├─┬ css-declaration-sorter@4.0.1
│ │   │ │ └── postcss@7.0.35  deduped
│ │   │ ├─┬ cssnano-util-raw-cache@4.0.1
│ │   │ │ └── postcss@7.0.35  deduped
│ │   │ ├── postcss@7.0.35  deduped
│ │   │ ├─┬ postcss-calc@7.0.5
│ │   │ │ └── postcss@7.0.35  deduped
│ │   │ ├─┬ postcss-colormin@4.0.3
│ │   │ │ └── postcss@7.0.35  deduped
│ │   │ ├─┬ postcss-convert-values@4.0.1
│ │   │ │ └── postcss@7.0.35  deduped
│ │   │ ├─┬ postcss-discard-comments@4.0.2
│ │   │ │ └── postcss@7.0.35  deduped
│ │   │ ├─┬ postcss-discard-duplicates@4.0.2
│ │   │ │ └── postcss@7.0.35  deduped
│ │   │ ├─┬ postcss-discard-empty@4.0.1
│ │   │ │ └── postcss@7.0.35  deduped
│ │   │ ├─┬ postcss-discard-overridden@4.0.1
│ │   │ │ └── postcss@7.0.35  deduped
│ │   │ ├─┬ postcss-merge-longhand@4.0.11
│ │   │ │ ├── postcss@7.0.35  deduped
│ │   │ │ └─┬ stylehacks@4.0.3
│ │   │ │   └── postcss@7.0.35  deduped
│ │   │ ├─┬ postcss-merge-rules@4.0.3
│ │   │ │ └── postcss@7.0.35  deduped
│ │   │ ├─┬ postcss-minify-font-values@4.0.2
│ │   │ │ └── postcss@7.0.35  deduped
│ │   │ ├─┬ postcss-minify-gradients@4.0.2
│ │   │ │ └── postcss@7.0.35  deduped
│ │   │ ├─┬ postcss-minify-params@4.0.2
│ │   │ │ └── postcss@7.0.35  deduped
│ │   │ ├─┬ postcss-minify-selectors@4.0.2
│ │   │ │ └── postcss@7.0.35  deduped
│ │   │ ├─┬ postcss-normalize-charset@4.0.1
│ │   │ │ └── postcss@7.0.35  deduped
│ │   │ ├─┬ postcss-normalize-display-values@4.0.2
│ │   │ │ └── postcss@7.0.35  deduped
│ │   │ ├─┬ postcss-normalize-positions@4.0.2
│ │   │ │ └── postcss@7.0.35  deduped
│ │   │ ├─┬ postcss-normalize-repeat-style@4.0.2
│ │   │ │ └── postcss@7.0.35  deduped
│ │   │ ├─┬ postcss-normalize-string@4.0.2
│ │   │ │ └── postcss@7.0.35  deduped
│ │   │ ├─┬ postcss-normalize-timing-functions@4.0.2
│ │   │ │ └── postcss@7.0.35  deduped
│ │   │ ├─┬ postcss-normalize-unicode@4.0.1
│ │   │ │ └── postcss@7.0.35  deduped
│ │   │ ├─┬ postcss-normalize-url@4.0.1
│ │   │ │ └── postcss@7.0.35  deduped
│ │   │ ├─┬ postcss-normalize-whitespace@4.0.2
│ │   │ │ └── postcss@7.0.35  deduped
│ │   │ ├─┬ postcss-ordered-values@4.1.2
│ │   │ │ └── postcss@7.0.35  deduped
│ │   │ ├─┬ postcss-reduce-initial@4.0.3
│ │   │ │ └── postcss@7.0.35  deduped
│ │   │ ├─┬ postcss-reduce-transforms@4.0.2
│ │   │ │ └── postcss@7.0.35  deduped
│ │   │ ├─┬ postcss-svgo@4.0.2
│ │   │ │ └── postcss@7.0.35  deduped
│ │   │ └─┬ postcss-unique-selectors@4.0.1
│ │   │   └── postcss@7.0.35  deduped
│ │   └── postcss@7.0.35  deduped
│ └── UNMET PEER DEPENDENCY postcss@8.2.8
└─┬ @vue/compiler-sfc@3.0.7
  └── UNMET PEER DEPENDENCY postcss@8.2.8

and npm list cssnano gives:

alpha7-postcss8@0.1.0 /Users/ced-pro/Code/test/vue-cli-tests/alpha7-postcss8
└─┬ @vue/cli-service@5.0.0-alpha.7
  ├─┬ css-minimizer-webpack-plugin@1.2.0
  │ └── cssnano@4.1.10
  └── cssnano@5.0.0-rc.1

1reaction

sodateacommented, Mar 11, 2021

Seems fixable by bumping cssnano version to v5.0.0-rc.1