title: Gatsby: Index page "/" fails to load when using MDX, other path loads
body: <p>I am using Gatsby to create a documentation site, using <code>.mdx</code> to manage contents. I have configured the <code>gatsby-node.js</code> and created the template. Everything path works fine, however, the index page fails to fetch results from the GraphQL query. I have cleared the cache and rebuilt the project severally. I tried a fix on <a href="https://github.com/gatsbyjs/gatsby/issues/10394" rel="nofollow noreferrer">Github</a> which suggested renaming the <code>index.js</code> to <code>main.js</code>. This worked seamlessly on dev but not in prod.</p>
  
  <p>Here's the <code>gatsby-node.js</code> file:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const {createFilePath} = require(`gatsby-source-filesystem`)
  const path = require(`path`)
  
  exports.createPages = ({actions, graphql}) =&gt; {
      const {createPage} = actions
      const blogPostTemplate = path.resolve('src/templates/postTemplate.js')
  
      return(graphql(`
      {
          allMdx {
            nodes {
              frontmatter {
                title
              }
              fields {
                slug
              }
            }
          }
      } 
      `)).then(result =&gt; {
          if(result.errors) {
              throw result.errors
          }
  
          const posts = result.data.allMdx.nodes
  
          posts.forEach(post =&gt; {
              createPage({
                  path: post.fields.slug,
                  component: blogPostTemplate,
                  context: {
                      slug: post.fields.slug
                  }
              })
          })
      })
  }
  
  exports.onCreateNode = ({node, actions, getNode}) =&gt; {
      const { createNodeField } = actions
      if(node.internal.type === `Mdx`) {
          const value = createFilePath({node, getNode})
          createNodeField({
              name: `slug`,
              node,
              value
          })
      }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here's the <code>postTemplate.js</code> file:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react'
  import {graphql} from 'gatsby'
  import {MDXRenderer} from 'gatsby-plugin-mdx'
  
  import Layout from '../components/Layout/Layout';
  
  export default ({data}) =&gt; {
    const {body, tableOfContents, fields} = data.mdx
    return (
      &lt;Layout&gt;
        {tableOfContents}
        &lt;MDXRenderer&gt;
          {body}
        &lt;/MDXRenderer&gt;
        {fields}
      &lt;/Layout&gt;
      
    )
  }
  
  export const query  = graphql`
  query PostBySlug($slug: String!) {
    mdx (fields: {slug: {eq: $slug}}) {
      body
      tableOfContents
      fields {
        slug
      }
    }
  }
  `</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any suggestions would be highly appreciated.</p>