Unknown error from PostCSS plugin. Your current PostCSS version is 8.1.7, but postcss-preset-env uses 7.0.35

[TheManFromEarth1]

This is the error-message:

Unknown error from PostCSS plugin. Your current PostCSS version is 8.1.7, but postcss-preset-env uses 7.0.35. Perhaps this is the source of the error below.

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Using external babel configuration from /home/a/Websites/devilbox/data/www/project-nextjs/htdocs/frontend/babel.config.json

Unknown error from PostCSS plugin. Your current PostCSS version is 8.1.7, but postcss-preset-env uses 7.0.35. Perhaps this is the source of the error below.

error - ./styles/utilities.css ((webpack)/css-loader/cjs.js??ref--5-oneOf-6-1!(webpack)/**postcss-loader/cjs.js??ref--5-oneOf-6-2!./styles/utilities.css)**

RangeError: Maximum call stack size exceeded
    at Function.keys (<anonymous>)
Error: Cannot find module '/home/a/Websites/devilbox/data/www/project-nextjs/htdocs/frontend/.next/build-manifest.json'
Require stack:
- /home/a/Websites/devilbox/data/www/project-nextjs/htdocs/frontend/node_modules/next/dist/next-server/server/load-components.js
- /home/a/Websites/devilbox/data/www/project-nextjs/htdocs/frontend/node_modules/next/dist/next-server/server/api-utils.js
- /home/a/Websites/devilbox/data/www/project-nextjs/htdocs/frontend/node_modules/next/dist/next-server/server/next-server.js
- /home/a/Websites/devilbox/data/www/project-nextjs/htdocs/frontend/node_modules/next/dist/server/next.js
- /home/a/Websites/devilbox/data/www/project-nextjs/htdocs/frontend/node_modules/next/dist/server/lib/start-server.js
- /home/a/Websites/devilbox/data/www/project-nextjs/htdocs/frontend/node_modules/next/dist/cli/next-dev.js
- /home/a/Websites/devilbox/data/www/project-nextjs/htdocs/frontend/node_modules/next/dist/bin/next
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
    at Function.mod._resolveFilename (/home/a/Websites/devilbox/data/www/project-nextjs/htdocs/frontend/node_modules/next/dist/build/webpack/require-hook.js:4:1715)
    at Function.Module._load (internal/modules/cjs/loader.js:725:27)
    at Module.require (internal/modules/cjs/loader.js:952:19)

My Postcss.config.js

module.exports = {
  plugins: [
    "@tailwindcss/jit",
    "postcss-flexbugs-fixes",
    "postcss-nested",
    "autoprefixer",
    [
      "postcss-preset-env",
      {
        autoprefixer: {
          flexbox: "no-2009",
        },
        stage: 3,
        features: {
          "custom-properties": false,
        },
      },
    ],
  ],
};

Babel.config.json

{
    "presets": ["next/babel"],
    "plugins": [
    ["inline-react-svg"],
    ["styled-components", { "ssr": true }]
  ]
  }

package.json

  "devDependencies": {
    "@babel/cli": "^7.13.0",
    "@babel/core": "^7.13.1",
    "@tailwindcss/jit": "^0.1.1",
    "@types/sortablejs": "^1.10.6",
    "autoprefixer": "^10.2.5",
    "babel-plugin-inline-react-svg": "^2.0.1",
    "babel-plugin-styled-components": "^1.12.0",
    "next-server-context": "^2.0.0",
    "postcss": "^8.2.8",
    "postcss-flexbugs-fixes": "4.2.1",
    "postcss-nested": "^4.2.3",
    "postcss-preset-env": "^6.7.0",
    "tailwindcss": "^2.0.2"
  }

Any idea?

[silvenon]

The error seems very clear: postcss-preset-env doesn't support PostCSS v8, see csstools/postcss-preset-env#191. This means you can't use @tailwind/jit and postcss-preset-env together currently.