ignoreWarnings having no effect with CRACO and webpack 5

Question

I'm getting a compilation warning from an external module. This is causing my build to fail, and its annoying:

WARNING in ./node_modules/@private_team/library/styles/css/min/beam.min.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].oneOf[5].use[2]!./node_modules/@private_team/library/styles/css/min/beam.min.css) Module Warning (from ./node_modules/postcss-loader/dist/cjs.js): Warning

(1206:125827) autoprefixer: end value has mixed support, consider using flex-end instead

I am working on a project that was initiated with create-react-app, and is now running react-scripts 5, which uses webpack 5 under the hood. We are using craco to customize a few things, so I have access to add some customization to my webpack config. My craco.config.js looks like this:

const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");

module.exports = {
  webpack: {
    resolve: {
      extensions: [".ts", ".tsx", ".jsx", ".js"]
    },
    // the @private_team/library package was causing errors, which this fixed:
    alias: {
      "react/jsx-runtime": "react/jsx-runtime.js",
      "react/jsx-dev-runtime": "react/jsx-dev-runtime.js"
    },
    // this is what webpack says to add, but its not helping
    ignoreWarnings: [
      {
        message: /autoprefixer/
      }
    ],
    plugins: [
      new NodePolyfillPlugin({
        excludeAliases: ["console"]
      })
    ]
  },
  plugins: [
    ...
  ]
};

I'm trying to add ignoreWarnings in here, but no matter what variations I use, these warnings are still present in my console. I've tried variations like:

 ignoreWarnings: [
      {
        text: /flex/
      }
    ],

 ignoreWarnings: [
      {
        module: /node_modules/
      }
    ],

 ignoreWarnings: [
      {
        module: /.css&/
      }
    ],

 ignoreWarnings: [/autoprefixer/],

Seems like no matter what I try, the ignoreWarnings is not responding. I know that the craco.config.js file is being read, as the alias property made a positive impact on some other issues I was having.

What is going wrong here? Is this a craco issue? A webpack issue? How can I ignore these warnings properly?

Answer 1

Turns out I asked too soon. The way to do this with CRACO is to add it to the configure property:

module.exports = {
  webpack: {
    ...,
    configure: {
      ignoreWarnings: [{ module: /.css$/ }]
    },
  },
  ...
};

I'll leave this here in the rare event that it might help someone else.