Dynamic route shows 404 page on initial render

[NidhiKJha]

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

            createPage({
            path: `/discount/`,
            matchPath: `/discount/:discountCode`,
            component: path.resolve('./src/templates/discount/discount.js'),
        })

The first initial render of the website for hostname//discount/:discountCode displays a 404 for a split second before the Product Component is rendered.

I referred to this thread as well but after adding gatsby-plugin-netlify I started getting this error: Cannot destructure property RawSource of 'undefined' or 'null'.

Reproduction Link

https://deploy-preview-166--hathaspace.netlify.app/discount/welcome

Steps to Reproduce

1. Go to the URL https://deploy-preview-166--hathaspace.netlify.app/discount/welcome

Expected Result

The URL should show the loader and then route the user back to the homepage. ie. back to this home page https://deploy-preview-166--hathaspace.netlify.app/

Actual Result

The URL displays the 404 page for a split second and then how the loader and then route the user back to the homepage.

Environment

  System:
    OS: macOS 11.4
    CPU: (8) x64 Intel(R) Core(TM) i5-8257U CPU @ 1.40GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 12.13.0 - /usr/local/bin/node
    npm: 6.12.0 - /usr/local/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 91.0.4472.114
    Safari: 14.1.1
  npmPackages:
    gatsby: ^2.19.5 => 2.20.2
    gatsby-cli: ^3.1.0 => 3.1.0
    gatsby-image: ^2.2.16 => 2.3.0
    gatsby-plugin-facebook-pixel: ^1.0.8 => 1.0.8
    gatsby-plugin-google-analytics: ^3.8.0 => 3.8.0
    gatsby-plugin-ical: ^0.1.1 => 0.1.1
    gatsby-plugin-manifest: ^3.7.1 => 3.7.1
    gatsby-plugin-mdx: ^2.2.0 => 2.2.0
    gatsby-plugin-netlify: ^3.9.0 => 3.9.0
    gatsby-plugin-netlify-cache: ^2.0.0 => 2.0.0
    gatsby-plugin-react-helmet: ^3.1.22 => 3.2.0
    gatsby-plugin-sass: ^2.2.0 => 2.2.0
    gatsby-plugin-sharp: ^3.7.1 => 3.7.1
    gatsby-plugin-use-query-params: ^1.0.1 => 1.0.1
    gatsby-source-contentful: ^2.1.86 => 2.2.2
    gatsby-source-shopify: ^3.9.0 => 3.9.0
    gatsby-transformer-remark: ^2.6.52 => 2.7.0
    gatsby-transformer-sharp: ^2.3.14 => 2.4.1
  npmGlobalPackages:
    gatsby-cli: 3.9.0

Config Flags

No response

[LekoArts]

Hi! You'll need to use gatsby-plugin-netlify. It seems you're still on Gatsby v2 so try the ^2.0.0 version range of gatsby-plugin-netlify since the current version expects webpack 5 to exist in the project.