search

nuxt / vite

⚡ Vite Experience with Nuxt 2
https://vite.nuxtjs.org
1.39k stars 46 forks source link

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

Open UrchenkoV opened 2 years ago

UrchenkoV commented 2 years ago

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 2 years ago

image same

tintin10q commented 2 years ago

What should we do?

hay-kot commented 2 years ago

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 2 years ago

Same here with Nuxt2.

fafamnzm commented 2 years ago

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 2 years ago

can so confirm... any update here?

eugenioclrc commented 2 years ago

same here...

Ahmard commented 2 years ago

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

dasfmi commented 2 years ago

did you find a solution for this error?

nwittwer commented 2 years ago

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: https://github.com/nuxt/vite/blob/20559a0b3887cd0f5c70750da82d5d8d78097b11/package.json#L36

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: https://github.com/nuxt/vite/pull/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"
  },
  ...
}