next.js: Error: true is not a PostCSS plugin

True is not a PostCSS plugin

Describe the bug

When running yarn dev it returns the following error:

error - ./styles/index.css (./node_modules/next/node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/next/dist/compiled/postcss-loader??__nextjs_postcss!./styles/index.css)
Error: true is not a PostCSS plugin

I have tried using .json instead of .js, that did not resolve the issue. I am using typescript and this is a new bug. I have had the same configuration for tailwind.config.js and postcss.config.js in the root of my projects for months with no prior issues. I even eliminated all content from styles/index.css with the exception of the following:

@tailwind base;

@tailwind components;

@tailwind utilities;

To Reproduce

Install the following:

yarn add tailwindcss next@9.5.4-canary.20 react react-dom && yarn add -D postcss-preset-env autoprefixer @types/react @types/react-dom @types/node postcss-flexbugs-fixes stylelint stylelint-config-recommended typescript

Steps to reproduce the behavior, please provide code snippets or a repository:

  1. Go to ‘https://github.com/DopamineDriven/windy-city-next
  2. Click on ‘clone repository or download zip’
  3. ‘install dependencies’
  4. run yarn dev and the error will flag

Expected behavior

I expect it to run just as all of my other TS+Nextjs+Tailwindcss repos do, each using next 9.5.x (headless-wp-next-directory, asross-portfolio)

Screenshots

image

System information

  • OS: Windows
  • Browser (if applies): Brave, Chrome
  • Version of Next.js: 9.5.4-canary.20
  • Version of Node.js: 14.11.0

Add any other context about the problem here.

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Reactions: 21
  • Comments: 20 (3 by maintainers)

Commits related to this issue

Most upvoted comments

Update: Determined the issue

autoprefixer@10.0.0 breaks next’s postcss loader on start

I rolled back to autoprefixer@9.8.6 and the issue was resolved

UPDATE: I solved this issue by adding this to package.json 🎉

    "peerDependencies": {
        "postcss": "^8.0.0"
    },

SOURCE: https://github.com/postcss/autoprefixer/releases/tag/10.0.0

Following TailwindCSS’ guide fixed the issue for me: https://tailwindcss.com/docs/installation#post-css-7-compatibility-build

@DmitryOlkhovoi I had the same issue and managed to fix it by downgrading the package to postcss-nested@4.2.3

For me I had to downgrade postcss-flexbugs-fixes from 5.0.0 to 4.2.1. I did this in the package.json by changing to: "postcss-flexbugs-fixes": "4.2.1", and rerunning yarn.

What @DopamineDriven mentioned about downgrading is correct and it fixed the issue on my end!

I created a separated issue about updating to PostCSS 8 https://github.com/vercel/next.js/issues/17242

Adding postcss as a devDependency solved the issue for me. Version 8.3.0

I have the same problem with postcss-nested

For me I had to downgrade postcss-flexbugs-fixes from 5.0.0 to 4.2.1. I did this in the package.json by changing to: "postcss-flexbugs-fixes": "4.2.1", and rerunning yarn.

If you’re using tailwindcss@2 there’s no need to keep this module, tw2 dropped IE support anyways