gatsby-plugin-mdx keeps giving warnings

[bsraya]

I had just migrating from Gatsby.js v2.x.x to v3.3.0. However, gatsby-plugin-mdx keeps giving me warning like this

Is this warning normal? If not, how do I resolve this issue?

Here is the package.json file:

{
"dependencies": {
    "@mdx-js/mdx": "^1.6.22",
    "@mdx-js/react": "^1.6.22",
    "cross-env": "^7.0.3",
    "gatsby": "^3.3.0",
    "gatsby-plugin-feed": "^3.3.0",
    "gatsby-plugin-google-analytics": "^3.3.0",
    "gatsby-plugin-manifest": "^3.3.0",
    "gatsby-plugin-mdx": "^2.3.0",
    "gatsby-plugin-offline": "^4.3.0",
    "gatsby-plugin-react-helmet": "^4.3.0",
    "gatsby-plugin-robots-txt": "^1.5.5",
    "gatsby-plugin-sharp": "^3.3.0",
    "gatsby-plugin-sitemap": "^3.3.0",
    "gatsby-plugin-typography": "^3.3.0",
    "gatsby-remark-code-titles": "^1.1.0",
    "gatsby-remark-copy-linked-files": "^4.0.0",
    "gatsby-remark-embed-youtube": "^0.0.7",
    "gatsby-remark-external-links": "^0.0.4",
    "gatsby-remark-images": "^5.0.0",
    "gatsby-remark-katex": "^3.10.0",
    "gatsby-remark-responsive-iframe": "^4.0.0",
    "gatsby-remark-smartypants": "^4.0.0",
    "gatsby-remark-twitter-cards": "^0.6.1",
    "gatsby-remark-unwrap-images": "^1.0.2",
    "gatsby-remark-vscode": "^3.2.1",
    "gatsby-source-filesystem": "^3.3.0",
    "gatsby-transformer-remark": "^4.0.0",
    "gatsby-transformer-sharp": "^3.3.0",
    "katex": "^0.10.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-helmet": "^6.1.0",
    "react-typography": "^0.16.19",
    "remark-html-katex": "^3.0.0",
    "remark-math": "^3.0.0",
    "synthwave-vscode": "github:robb0wen/synthwave-vscode",
    "typography": "^0.16.19"
  },
}

Here is gatsby-config.js file:

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        trackingId: `UA-189126194-1`,
        head: true,
        anonymize: true,
        respectDNT: true,
        pageTransitionDelay: 0,
      },
    },
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `Bijon Setyawan Raya`,
        short_name: `Bijon S. R.`,
        start_url: `/`,
        background_color: `#121212`,
        theme_color: `#FFFFFF`,
        display: `standalone`,
        legacy: true,
        icon: `./static/favicons/icon.png`,
      },
    },
    'gatsby-plugin-offline',
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `${__dirname}/src/utils/typography`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    `gatsby-remark-images`,
    {
      resolve: `gatsby-remark-images`,
      options: {
        maxWidth: 568,
        showCaptions: true,
        loading: `lazy`,
      },
    },
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/src`,
        name: 'src',
      },
    },
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        extensions: [`.mdx`, `.md`],
        defaultLayouts: {
          default: require.resolve(`${__dirname}/src/templates/template.js`),
        },
        gatsbyRemarkPlugins: [
          {
            resolve: `gatsby-remark-katex`,
            options: {
              strict: `ignore`,
              minRuleThickness: 0.06,
              displayMode: true,
              throwOnError: true,
              colorIsTextColor: true,
            },
          },
          `gatsby-remark-smartypants`,
          `gatsby-remark-unwrap-images`,
          `gatsby-remark-copy-linked-files`,
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 564,
              showCaptions: true,
              loading: `lazy`,
              withWebp: true,
            },
          },
          {
            resolve: 'gatsby-remark-embed-youtube',
            options: {
              height: 325,
              width: 568,
              ratio: 1.77,
              related: false,
              noIframeBorder: true,
            },
          },
          {
            resolve: `gatsby-remark-responsive-iframe`,
            options: {
              wrapperStyle: `margin-bottom: 1.0725rem`,
            },
          },
          {
            resolve: `gatsby-remark-external-links`,
            options: {
              target: `_blank`,
            },
          },
          {
            resolve: `gatsby-remark-code-titles`,
            options: {
              className: `gatsby-code-title`,
            },
          },
          {
            resolve: `gatsby-remark-twitter-cards`,
            options: {
              title: `Bijon Setyawan Raya`,
              titleFontSize: 105,
              fontColor: `#fff1d0`,
              background: require.resolve(`${__dirname}/content/assets/base.png`),
              fontStlye: require.resolve(`${__dirname}/src/fonts/Inconsolata.woff2`),
            },
          },
          {
            resolve: `gatsby-remark-vscode`,
            options: {
              theme: {
                default: `Synthwave '84`,
              },
              extensions: [`synthwave-vscode`],
            },
          },
        ],
        remarkPlugins: [
          require('remark-math'),
          require('remark-html-katex')
        ]
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/assets`,
        name: `assets`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/blog`,
        name: `blog`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/portfolio`,
        name: `portfolio`,
      },
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-twitter-cards`,
            options: {
              author: 'Bijon Setyawan Raya',
              background: require.resolve(`${__dirname}/content/assets/base.png`),
              fontColor: `#fff1d0`,
              titleFontSize: 105,
              subtitleFontSize: 60,
              fontStyle: require.resolve(`${__dirname}/src/fonts/Inconsolata.woff2`),
            },
          },
        ],
      },
    },
    `gatsby-plugin-sitemap`,
    {
      resolve: 'gatsby-plugin-robots-txt',
      options: {
        host: 'https://www.bsraya.com/',
        sitemap: 'https://www.bsraya.com//sitemap.xml',
        policy: [{ userAgent: '*', Disallow: '' }],
      },
    },
        ],
      },
    },
  ],
};

Would appreciate all the help. Thanks.