nuxt / vite

⚡ Vite Experience with Nuxt 2

Home Page:https://vite.nuxtjs.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

UrchenkoV opened this issue · comments

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?

image
same

What should we do?

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.

commented

Same here with Nuxt2.

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

can so confirm... any update here?

same here...

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

did you find a solution for this error?

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:

"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"
  },
  ...
}