Skip to content

Error: true is not a PostCSS plugin #17236

Closed
@DopamineDriven

Description

@DopamineDriven

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.

Activity

DopamineDriven

DopamineDriven commented on Sep 20, 2020

@DopamineDriven
Author

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

stephanschubert

stephanschubert commented on Sep 20, 2020

@stephanschubert
ai

ai commented on Sep 20, 2020

@ai

To fix this issue Next.js need to update PostCSS 7 to 8

ai

ai commented on Sep 20, 2020

@ai

I created a separated issue about updating to PostCSS 8 #17242

timneutkens

timneutkens commented on Sep 21, 2020

@timneutkens
Member

Closing as duplicate of #17242

alexventuraio

alexventuraio commented on Sep 23, 2020

@alexventuraio

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

DmitryOlkhovoi

DmitryOlkhovoi commented on Sep 25, 2020

@DmitryOlkhovoi

I have the same problem with postcss-nested

laurivaananen

laurivaananen commented on Sep 26, 2020

@laurivaananen

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

DmitryOlkhovoi

DmitryOlkhovoi commented on Sep 27, 2020

@DmitryOlkhovoi

@laurivaananen yes, that works :)

AWIXOR-zz

AWIXOR-zz commented on Oct 1, 2020

@AWIXOR-zz

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

This worked for me too!

dr5hn

dr5hn commented on Oct 5, 2020

@dr5hn

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

7 remaining items

added a commit that references this issue on Oct 22, 2020
added a commit that references this issue on Oct 23, 2020
giraffesyo

giraffesyo commented on Nov 2, 2020

@giraffesyo
Contributor

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.

added a commit that references this issue on Nov 12, 2020
kirincc

kirincc commented on Nov 14, 2020

@kirincc

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

In my case, I not only rolled back to autoprefixer@9.8.6 but also downgrading the package to postcss-nested@4.2.3, and the issue was solved.

sfmskywalker

sfmskywalker commented on Nov 19, 2020

@sfmskywalker

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

lu-zen

lu-zen commented on Nov 29, 2020

@lu-zen

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

sebmellen

sebmellen commented on Jan 5, 2021

@sebmellen

@sfmskywalker Thank you! That finally fixed the issue for me.

Does anyone have an idea when we might be able to move off the compatibility build?

From the TailwindCSS link:

Once the rest of your tools have added support for PostCSS 8, you can move off of the compatibility build by re-installing Tailwind and its peer-dependencies using the latest tag:
npm uninstall tailwindcss @tailwindcss/postcss7-compat
npm install tailwindcss@latest postcss@latest autoprefixer@latest

dannysofftie

dannysofftie commented on May 22, 2021

@dannysofftie

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

balazsorban44

balazsorban44 commented on Jan 28, 2022

@balazsorban44
Member

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

locked as resolved and limited conversation to collaborators on Jan 28, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @stephanschubert@ai@sfmskywalker@DmitryOlkhovoi@timneutkens

        Issue actions

          Error: true is not a PostCSS plugin · Issue #17236 · vercel/next.js