Closed
Description
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:
- Go to 'https://github.com/DopamineDriven/windy-city-next'
- Click on 'clone repository or download zip'
- 'install dependencies'
- 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
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 commentedon Sep 20, 2020
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 commentedon Sep 20, 2020
Maybe related: webpack-contrib/postcss-loader#482
ai commentedon Sep 20, 2020
To fix this issue Next.js need to update PostCSS 7 to 8
ai commentedon Sep 20, 2020
I created a separated issue about updating to PostCSS 8 #17242
timneutkens commentedon Sep 21, 2020
Closing as duplicate of #17242
alexventuraio commentedon Sep 23, 2020
What @DopamineDriven mentioned about downgrading is correct and it fixed the issue on my end!
Downgrade autoprefixer till next.js upgrades postcss vercel/next.js#1…
DmitryOlkhovoi commentedon Sep 25, 2020
I have the same problem with
postcss-nested
laurivaananen commentedon Sep 26, 2020
@DmitryOlkhovoi I had the same issue and managed to fix it by downgrading the package to
postcss-nested@4.2.3
DmitryOlkhovoi commentedon Sep 27, 2020
@laurivaananen yes, that works :)
AWIXOR-zz commentedon Oct 1, 2020
This worked for me too!
dr5hn commentedon Oct 5, 2020
UPDATE: I solved this issue by adding this to package.json 🎉
SOURCE: https://github.com/postcss/autoprefixer/releases/tag/10.0.0
7 remaining items
Mapped children (#364)
Groom and update dependencies
giraffesyo commentedon Nov 2, 2020
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.Timeline (#278)
kirincc commentedon Nov 14, 2020
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 commentedon Nov 19, 2020
Following TailwindCSS' guide fixed the issue for me: https://tailwindcss.com/docs/installation#post-css-7-compatibility-build
lu-zen commentedon Nov 29, 2020
If you're using tailwindcss@2 there's no need to keep this module, tw2 dropped IE support anyways
sebmellen commentedon Jan 5, 2021
@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:
feat: support import of external CSS
dannysofftie commentedon May 22, 2021
Adding
postcss
as a devDependency solved the issue for me. Version8.3.0
balazsorban44 commentedon Jan 28, 2022
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.