[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.