Typescript Support for Gatsby Project

[marcomiduri]

Hi, I have a Gatsby project that has been using this module. We are converting the project and have an issue with the plugin import.

Here are the steps that I followed:

1. yarn add webpack-filter-warnings-plugin @types/webpack --dev
2. Add code for the webpack configuration

import { Actions } from "gatsby";
import path from "path"
import { FilterWarningsPlugin } from "webpack-filter-warnings-plugin";

/**
 * Defines schema for custom post types
 *
 * @note Used on Gatsby's `onCreateNode` hook
 */
 export const extendWebpackConfig = (actions: Actions) => {
  const { setWebpackConfig } = actions

  setWebpackConfig({
    plugins: [
      new FilterWarningsPlugin({
        exclude:
          /mini-css-extract-plugin[^]*Conflicting order. Following module has been added:/,
      }),
    ],
    resolve: {
      alias: {
        "../../theme.config$": path.join(__dirname, "../semantic/theme.config"),
        components: path.resolve(__dirname, "../components"),
        effects: path.resolve(__dirname, "../effects"),
        constants: path.resolve(__dirname, "../constants"),
        lib: path.resolve(__dirname, "../lib"),
        semantic: path.resolve(__dirname, "../semantic/site"),
        "less-context": path.resolve(__dirname, "../less/context.less"),
      },
    },
  })
}

Please let me know if you have any solutions.

[aaaeka]

This plugin is no longer required with gatsby v5. You can now use webpack's ignoreWarnings. To remove the conflicting order warning you can use this:

export const onCreateWebpackConfig: GatsbyNode['onCreateWebpackConfig'] = ({ actions: { setWebpackConfig } }) => {
    setWebpackConfig({
        ignoreWarnings: [
            /mini-css-extract-plugin[^]*Conflicting order. Following module has been added:/,
            () => true,
        ],
    });
}

[ohprettyhak]

This plugin is no longer required with gatsby v5. You can now use webpack's ignoreWarnings. To remove the conflicting order warning you can use this:

export const onCreateWebpackConfig: GatsbyNode['onCreateWebpackConfig'] = ({ actions: { setWebpackConfig } }) => {
  setWebpackConfig({
      ignoreWarnings: [
          /mini-css-extract-plugin[^]*Conflicting order. Following module has been added:/,
          () => true,
      ],
  });
}

well done