nuxt/vite

Nuxt with vite gives this error. This version of postcss-preset-env is not optimised to work with PostCSS 8.

UrchenkoV opened this issue · 10 comments

UrchenkoV commented

Nuxt with vite gives this error.

This version of postcss-preset-env is not optimised to work with PostCSS 8.    
Please update to version 7 of PostCSS Preset Env.  

"dependencies": {
    "@nuxtjs/auth-next": "^5.0.0-1624817847.21691f1",
    "@nuxtjs/axios": "^5.13.6",
    "@nuxtjs/i18n": "^7.2.0",
    "@nuxtjs/proxy": "^2.1.0",
    "chart.js": "^3.7.1",
    "chartjs-adapter-moment": "^1.0.0",
    "core-js": "^3.15.1",
    "moment": "^2.29.1",
    "nuxt": "^2.15.7",
    "vue-multiselect": "^2.1.6",
    "vuelidate": "^0.7.7",
    "vuetify": "^2.5.5",
    "vuex-persistedstate": "^4.1.0"
  },
  "devDependencies": {
    "@nuxt/postcss8": "^1.1.3",
    "@nuxtjs/vuetify": "^1.12.1",
    "autoprefixer": "^10.4.2",
    "eslint-config-prettier": "^8.3.0",
    "nuxt-purgecss": "^1.0.0",
    "nuxt-vite": "^0.3.5",
    "postcss": "^8.4.12",
    "postcss-import": "^14.0.2",
    "postcss-nested": "^5.0.6",
    "prettier": "^2.3.2",
    "tailwindcss": "^3.0.19"
  }

How fixer?

erisvn commented

image
same

  • 👍1
tintin10q commented

What should we do?

hay-kot commented

I also had this issues, didn't find the direct cause, but a stop-gap between upgrading to Nuxt bridge was to revert to v0.2.3. Seems to be working for now.

Asef00 commented

Same here with Nuxt2.

fafamnzm commented

same here! I even remove vuetify, and axios modules and still get this error in repeat!
didn't find any solution for it

simonmaass commented

can so confirm... any update here?

eugenioclrc commented

same here...

Ahmard commented

You can get rid of the warning by installing postcss-preset-env version 7.

  • 👍2
  • 👎4
dasfmi commented

did you find a solution for this error?

nwittwer commented

Reason this error is occurring: Run yarn why postcss-preset-env

=> Found "postcss-preset-env@6.7.1"
info Reasons this module exists
   - "nuxt-vite" depends on it
   - Hoisted from "nuxt-vite#postcss-preset-env"
   - Hoisted from "nuxt#@nuxt#webpack#postcss-preset-env"

And if you check the nuxt-vite package.json:

vite/package.json

Line 36 in 20559a0

"postcss-preset-env": "^6.7.0",

And the core reason this message shows up: postcss-preset-env 6.7.1 release notes:

Added notice when using preset-env with PostCSS > 7 to prompt to upgrade.

A PR to update this postcss-preset-env for nuxt-vite is here: #231

Workaround

You can add the resolutions (Yarn)/overrides (NPM) to your package.json so that it specifically uses the postcss-preset-env 7.x version. After doing this the error is gone and as far as I can tell nothing breaks.

You DO NOT need to add postcss-preset-env as a dependency of your own project (it is already installed by nuxt-vite).

Yarn docs: resolutions
NPM docs: overrides

package.json (Yarn example)

{
  ...
  "resolutions": {
    "postcss-preset-env": "^7.0.0"
  },
  "dependencies": {
    "nuxt-vite": "0.3.5"
  },
  ...
}
  • 👍1