TypeError: compiler.plugin is not a function

Question

I'm trying to use Tailwind v2 into an old project that uses .tpl files. Not an issue as we're migrating to the world of SPAs. What I'm doing should work regardless.

I'm using the following (literally taken from my package.json):

• "autoprefixer": "^10.2.5",
• "babel-loader": "^8.1.0",
• "css-loader": "^5.0.0",
• "mini-css-extract-plugin": "^1.5.0",
• "extract-text-webpack-plugin": "^3.0.2",
• "postcss-loader": "^5.2.0",
• "postcss-preset-env": "^6.7.0",
• "webpack-merge": "^5.7.3"
• "postcss": "^8.2.12",
• "sass": "^1.27.0",
• "sass-loader": "^10.0.3",
• "style-loader": "^2.0.0",
• "tailwindcss": "^2.1.1",
• "webpack": "^5.35.0",
• "webpack-cli": "^4.6.0"

webpack-merge is solely used to distinguish file names for production and development.

Here's an exact copy of my webpack.config.js:

const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const { SRC, DIST, ASSETS } = require('./paths')


module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: 'styles.css',
      chunkFilename: '[id].css',
    }), 
    new ExtractTextPlugin('styles.css', {
      disable: process.env.NODE_ENV === 'development',
    }),
  ],

  module: {
    rules: [
      {
        test: /\.(js)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      },
      {
          test: /\.s[ac]ss$/i,
          use: ExtractTextPlugin.extract({
            use: [{
                loader: "css-loader"
            }, {
                loader: "sass-loader"
            }, {
              loader: "postcss-loader"
            }],
            // use style-loader in development 
            fallback: "style-loader"
        })
      },
    ],
  },
  entry: {
    scripts: path.resolve(SRC, 'js', 'index.js')
  },
  output: {
    // Put all the bundled stuff in your dist folder
    path: DIST,

    // Our single entry point from above will be named "scripts.js"
    filename: '[name].js',

    // The output path as seen from the domain we're visiting in the browser
    publicPath: ASSETS
  },
}

After running the build command, I get:

TypeError: compiler.plugin is not a function

Removing new ExtractTextPlugin from the plugin, the error is gone but another error comes up stating it's needed. I've also looked at Tailwinds' example but not having any luck. I've also looked at the ExtractTextWebpackPlugin docs but.... no luck, same error.

This project uses *.scss, *.css, *.js, *.tpl, *.php

Appreciate the help or pointers.

Thanks.

Answer 1

This plugin has been DEPRECATED. Please use: https://github.com/webpack-contrib/mini-css-extract-plugin