Css Minimizer Plugin: Error: Plugin name should be specified

[mikeyfe6]

Description

I cannot get Webpack, Sass, PostCss whatever it is, to work with me.... Can't find anything in the docs or on google whatsoever. Since migrating to Gatsby v3 I have multiple issues, this is one of them...

Actual result

Environment

I use the default gatsby-plugin-sass, no extra webpack.

Thanks in advance!

  System:
    OS: macOS 11.3.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 15.14.0 - ~/.nvm/versions/node/v15.14.0/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.14.0 - ~/.nvm/versions/node/v15.14.0/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 90.0.4430.212
    Safari: 14.1
  npmPackages:
    gatsby: ^3.5.1 => 3.5.1 
    gatsby-plugin-canonical-urls: ^3.5.0 => 3.5.0 
    gatsby-plugin-catch-links: ^3.5.0 => 3.5.0 
    gatsby-plugin-disqus: ^1.2.2 => 1.2.2 
    gatsby-plugin-eslint: ^3.0.0 => 3.0.0 
    gatsby-plugin-feed: ^3.5.0 => 3.5.0 
    gatsby-plugin-google-tagmanager: ^3.5.0 => 3.5.0 
    gatsby-plugin-image: ^1.5.0 => 1.5.0 
    gatsby-plugin-manifest: ^3.5.0 => 3.5.0 
    gatsby-plugin-netlify: ^3.5.0 => 3.5.0 
    gatsby-plugin-nprogress: ^3.5.0 => 3.5.0 
    gatsby-plugin-offline: ^4.5.1 => 4.5.1 
    gatsby-plugin-react-helmet: ^4.5.0 => 4.5.0 
    gatsby-plugin-robots-txt: ^1.6.2 => 1.6.2 
    gatsby-plugin-sass: ^4.5.0 => 4.5.0 
    gatsby-plugin-sharp: ^3.5.0 => 3.5.0 
    gatsby-plugin-sitemap: ^4.1.0 => 4.1.0 
    gatsby-plugin-smoothscroll: ^1.2.0 => 1.2.0 
    gatsby-remark-images: ^5.2.1 => 5.2.1 
    gatsby-remark-images-contentful: ^4.2.1 => 4.2.1 
    gatsby-remark-relative-images: ^2.0.2 => 2.0.2 
    gatsby-source-contentful: ^5.5.0 => 5.5.0 
    gatsby-source-filesystem: ^3.5.0 => 3.5.0 
    gatsby-transformer-remark: ^4.2.0 => 4.2.0 
    gatsby-transformer-sharp: ^3.5.0 => 3.5.0 
  npmGlobalPackages:
    gatsby-cli: 3.5.0

[LekoArts]

You'll need to share some code so that people can help you. Can you share a repository or the relevant code (e.g. the styles css file). The SASS plugin works fine, you must be using something in your site that is causing this.

[mikeyfe6]

Hi @LekoArts the styles error you see is coming from a folder 'styles', its a Webpack issue I think. The 'styles' folder contains all the css-files in my project merged to 1 file..

my github repo: https://github.com/mikeyfe6/Menefex

[lqthaiegi]

Hi @mikeyfe6, I have checked the webpack config in gatby v2 and I saw that in v2 they are using this webpack plugin optimize-css-assets-webpack-plugin. And in version 3 they have already changed to use css-minimizer-webpack-plugin. And this this plugin has an option to show the warning (warningsFilter: this is a function to filter type of warning you want to show log and default is just return true). Still don't know exactly the reason it's show warning (need to investigate more).

And I have a solution to hide these warning is that override default gatsby webpack config:
const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin');

[leonardoquevedox]

Thank you for sharing, @mikeyfe6! The final line of the code is actually actions.replaceWebpackConfig(config), though :)

[leonardoquevedox]

Here's how I'm using it:

// gatsby-node.js
...
const fixCssMinimizer = ({ actions, getConfig }) => {
  const config = getConfig()
  const minimizer = config?.optimization?.minimizer
  if (minimizer) {
    const indexOfCssMinimizerPlugin = minimizer.findIndex(
      (plugin) => plugin.constructor.name === CssMinimizerWebpackPlugin.name,
    )
    if (indexOfCssMinimizerPlugin > -1) {
      const currentCssMinimizerPlugin = minimizer[indexOfCssMinimizerPlugin]

      minimizer[indexOfCssMinimizerPlugin] = new CssMinimizerWebpackPlugin({
        test: /\.css(\?.*)?$/i,
        warningsFilter: () => false,
        parallel: currentCssMinimizerPlugin.options.parallel,
        minimizerOptions: currentCssMinimizerPlugin.options.minimizerOptions,
      })

      actions.replaceWebpackConfig(config)
    }
  }
}

exports.onCreateWebpackConfig = ({ actions, getConfig }) => {
  fixCssMinimizer({  actions, getConfig })
}
...

[mikeyfe6]

You're the boss 💪 ! No warnings are shown anymore.

[fpigeonjr]

this worked for me as well as. Thanks for sharing @leonardoquevedox!

[WiredEntrepreneur]

Finally got the waring messages turned off with this code. Thank you for sharing @leonardoquevedox 👍