mini-css-extract plugin with postcss throws this.getOptions is not a function

Question

I'm trying to set up a tailwind css for my personal project. It's a react SSR application. I'm having an issue with postcss setup under the webpack configuration. It throws the same error on every *.css file (even on the empty ones).

It looks like it can't resolve the configuration file or default options? Tried different configurations, but no effect. Initially, I thought that it could be something with my css files, but they all valid and compile if I remove postcss plugin

webpack config

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');

const paths = require('./paths');

module.exports = {
  entry: {
    index: path.resolve(paths.projectSrc, 'index.js'),
  },
  resolve: {
    alias: {
      '@src': paths.projectSrc,
    },
  },
module: {
  rules: [
  {
    test: /.js$/,
    exclude: /node_modules/,
    use: {
      loader: 'babel-loader',
    },
  },
  {
    test: /\.html$/,
    use: [
      {
        loader: 'html-loader',
        options: { minimize: true },
      },
    ],
    exclude: /node_modules/,
  },
  {
    exclude: /node_modules/,
    test: /\.css$/,
    use: [
      {
        loader: MiniCssExtractPlugin.loader,
        options: {
          publicPath: path.resolve(__dirname, './client-build/css/'),
        },
      },
      {
        loader: 'css-loader',
        options: { importLoaders: 1 },
      },
      {
        loader: 'postcss-loader',
        options: {
          postcssOptions: {
            config: path.resolve(__dirname, 'postcss.config.js'),
          },
        },
      },
    ],
  },
  {
    test: /\.(woff2?|ttf|otf|eot|png|jpg|svg|gif)$/,
    exclude: /node_modules/,
    loader: 'file-loader',
    options: {
      name: './assets/[name].[ext]',
    },
  },
],
},
  plugins: [
    new ESLintPlugin(),
    new HtmlWebpackPlugin({
      template: path.resolve(paths.public, 'index.html'),
      filename: 'index.html',
    }),
    new MiniCssExtractPlugin({
      filename: '[name].bundle.css',
      chunkFilename: '[id].css',
    }),
    new CopyWebpackPlugin({
      patterns: [{ from: path.resolve(paths.public, 'assets'), to: 'assets' }],
    }),
  ],
  devtool: 'inline-source-map',
};

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

console output

Answer 1

This is caused by a breaking change in v5.0.0 of postcss-loader where support for version 4 of webpack was dropped.

---

README which states:

Changelog

All notable changes to this project will be documented in this file. See standard-version for commit guidelines.

5.0.0 (2021-02-02)

⚠ BREAKING CHANGES

• minimum supported webpack version is 5

---

How to fix it

You will need to downgrade postcss-loader to v4.2.

Side Note for Angular Projects

In case this helps other readers: You may not just see this in React projects. I found this issue after upgrading an Angular 8 project to Angular 11.

While I can't help with React projects, this Angular hint may also be of use anyways. If you are on an Angular project and you've already tried to fix this issue by upgrading to v5 of webpack and then ran into dependency issues with libraries using v4 of webpack - You will want to follow these steps.

1. Downgrade postcss-loader to v4.2 as mentioned above.
2. Remove webpack v5 from package.json.
3. Delete package.lock.json.
4. Delete node_modules directory.
5. Run npm install.
6. Run ng serve or ng build.
7. Tell the boss you fixed it.

After this, you should be good to go with tailwindcss and Angular.