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:
- 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.
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Reactions: 21
- Comments: 20 (3 by maintainers)
Commits related to this issue
- Downgrade autoprefixer till next.js upgrades postcss https://github.com/vercel/next.js/issues/17236 — committed to abhishekbhardwaj/tailwind-react-next.js-typescript-eslint-jest-starter by abhishekbhardwaj 4 years ago
- Downgrade autoprefix (has a postcss-related bug documented here: https://github.com/vercel/next.js/issues/17236) — committed to PrefectHQ/ui by znicholasbrown 4 years ago
- October package updates (#317) * Update package lock * Downgrade autoprefix (has a postcss-related bug documented here: https://github.com/vercel/next.js/issues/17236) * Remove v-slot reference... — committed to PrefectHQ/ui by znicholasbrown 4 years ago
- Mapped children (#364) * Filter map indexes > -1 * Increase poll interval 1000 => 2000 * Add mapped children query * Update apollo flow run handler for _by_pk route * Update package lock ... — committed to PrefectHQ/ui by znicholasbrown 4 years ago
- Groom and update dependencies Note - PostCSS 8 issues (do not yet upgrade autoprefixer, postcss-x dependencies to next major version) - Error: true is not a PostCSS plugin https://github.com/vercel/n... — committed to ndrsllwngr/andreasellwanger.com by ndrsllwngr 4 years ago
- Timeline (#278) * Update tile to allow multiple color states and to use mapped children route * Add new components for the timeline chart * Improve the resize chart listener * Add a running ... — committed to PrefectHQ/ui by znicholasbrown 4 years ago
- feat: support import of external CSS Base on our current version of TailwindCSS and NextJS we are still on an older version of PostCSS. The new postcss-import plugin relies on PostCSS v8 but we need ... — committed to rankingdigitalrights/index2020 by critocrito 3 years ago
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 🎉
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. Version8.3.0
I have the same problem with
postcss-nested
If you’re using tailwindcss@2 there’s no need to keep this module, tw2 dropped IE support anyways