[Solved] Error: PostCSS plugin autoprefixer requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
at Processor.normalize (\node_modules\postcss-loader\node_modules\postcss\lib\processor.js:153:15)
at new Processor (\node_modules\postcss-loader\node_modules\postcss\lib\processor.js:56:25)
at postcss

Solution

Based on the documentation link, you must manually upgrade the packages. Example in my case for a project based on webpack need just to update those dependencies:

  "dependencies": {
    "autoprefixer": "^10.0.2",
    "postcss": "^8.1.7",
    "postcss-loader": "^4.0.4"
  }

So you do not need to downgrade autoprefixer, delete package-lock.json file first and, open a terminal window then execute the below commands one by one.

 npm i --save autoprefixer@^10.0.2
 npm i --save postcss@8.1.7 
 npm i --save postcss-loader@4.0.4

once you execute the commands make sure they are properly installed by seeing in the package.json file as shown in the below image.

apply the postcss-loader configuration settings in the rule section of the webpack.config file and save it, finally restart the server by saying npm start.

{
        test: /\.css/,
        loaders: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true,
              localIdentName: '[local]---[hash:base64:5]',
              importLoaders: 1,
            },
          },
          {
            loader: 'postcss-loader',
            options: {},
          },
        ],
 }

Conclusion

By manually installing the packages could solve this PostCSS plugin autoprefixer problem, we hope you find them helpful.

Shivaraju M
Shivaraju M

Over 3+ years experience in IT industry, good knowledge in . Net-based Web applications, windows applications, web services, and SPAs. I have played
multiple roles related to technical delivery in multiple domains while working on over 10+ technologies. I am
currently focused on continuous improvement and agile project management.

Leave a Reply