Skip to content
This repository has been archived by the owner on Jan 4, 2023. It is now read-only.

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

Open
UrchenkoV opened this issue Mar 30, 2022 · 10 comments
Labels
bug Something isn't working

Comments

@UrchenkoV
Copy link

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?

@UrchenkoV UrchenkoV added the bug Something isn't working label Mar 30, 2022
@erisvn
Copy link

erisvn commented Apr 4, 2022

image
same

@tintin10q
Copy link

What should we do?

@hay-kot
Copy link

hay-kot commented May 25, 2022

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
Copy link

Asef00 commented Jul 14, 2022

Same here with Nuxt2.

@fafamnzm
Copy link

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

@simonmaass
Copy link

can so confirm... any update here?

@eugenioclrc
Copy link

same here...

@Ahmard
Copy link

Ahmard commented Aug 24, 2022

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

@schehata
Copy link

schehata commented Sep 4, 2022

did you find a solution for this error?

@nwittwer
Copy link

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests