SyntaxError: unknown: Identifier '_frontmatter' has already been declared

[dasabhisek]

Detailed description

While runing gatsby develop to build .mdx file in src/pages and from git remote source getting this error

 ModuleBuildError: Module build failed (from ./node_modules/gatsby-plugin-mdx/loaders/mdx-loader.js):
  SyntaxError: C:\<...>\git\gatsbytest\pages\index.mdx: Identifier '_frontmatter' has already been declared. (269:13)
    267 | MDXContent.isMDXComponent = true;
    268 |
  > 269 | export const _frontmatter = {};
        |              ^
    270 |

What did you expect to happen? What happened instead? What would you like to see changed?
Expected to .mdx and .md files from src/pages and remote git sources to be build and published as static pages.

Steps to reproduce the issue

1. gatsby develop

Additional information

I am using gatsby-plugin-mdx along with gatsby-theme-carbon

Here is my gatsby-config.json details

...
plugins: [
    {
      resolve: "gatsby-plugin-manifest",
      options: {
        name: "Platform Engineering Services",
        icon: "src/images/favicon.svg",
        short_name: "Platform Engineering Services",
        start_url: "/",
        background_color: "#F4F4F4",
        theme_color: "#0062ff",
        display: "browser",	
      },
    },
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-transformer-sharp`,
      options: {
        // The option defaults to true
        checkSupportedExtensions: false,
      },
    },
    {
      resolve: 'gatsby-theme-carbon',
      options: {
	    mdx: false,
        extraLayouts: {
	      pagecontent: require.resolve("./src/components/page-layout.js"),
        },
	    theme: {
		  homepage: 'dark',
          interior: 'g10',
	    },
        mdxExtensions: ['.mdx'],
        gatsbyRemarkPlugins: [
          {
            resolve: 'gatsby-remark-mermaid',
            options: {
              language: 'mermaid',
              theme: 'dark',
              viewport: {
                width: 200,
                height: 200,
              },
              mermaidOptions: {
                themeCSS: '.node rect { fill: cornflowerblue; }',
              },
            },
          },
          {
            resolve: `gatsby-remark-plantuml`,
            options: {
              maxWidth: '960',
              attributes: 'max-width: 960;',
            }
          },
        ],
        remarkPlugins: [require("remark-grid-tables")],
      },
    },
    {
      resolve: "gatsby-plugin-anchor-links",
      options: {
        offset: -100
      }
    },
    {
      resolve: `gatsby-source-git`,
      options: {
        name: `TEST`,
        branch: `master`,
        remote: `https://<GIT-REPOSITORY>`,
        patterns: [`docs/**`, `!README.md`]
      },
    },
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        extensions: [`.md`, `.mdx`],
        gatsbyRemarkPlugins: [
	      {
		    resolve: `gatsby-remark-autolink-headers`,
            options: {
              offsetY: `100`,
              icon: `<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>`,
              className: `custom-class`,
              maintainCase: true,
              removeAccents: true,
              isIconAfterHeader: true,
              elements: [`h1`, `h2`,`h3`, `h4`, `h5`],
            },
	      },
	      {
            resolve: 'gatsby-remark-code-titles',
            options: {
              className: 'your-custom-class-name',
            },
          },
          {
            resolve: `gatsby-remark-plantuml`,
            options: {
              maxWidth: '960',
              attributes: 'max-width: 960;',
            }
          },
          {
            resolve: 'gatsby-remark-mermaid',
            options: {
              // this is the language in your code-block that triggers mermaid parsing
              language: 'mermaid', // default
              theme: 'default' // could also be dark, forest, or neutral
            }
          },
          {
	        resolve: `gatsby-remark-prismjs`,
            options: {} 
          },
          {
            resolve: `gatsby-remark-images`,
            options: {
              // It's important to specify the maxWidth (in pixels) of
              // the content container as this plugin uses this as the
              // base for generating different widths of each image.
              maxWidth: 1080,
            },
          },
          {
            resolve: `gatsby-remark-classes`,
            options: {
              classMap: {
                "heading[depth=1]": "title",
                paragraph: "para",
                table: "page-table"
              }
            }
          }
        ],
....

[dasabhisek]

package.json

"dependencies": {
    "@carbon/icons-react": "^10.43.0",
    "@mdx-js/mdx": "^1.6.22",
    "@mdx-js/react": "^1.6.22",
    "carbon-components": "^10.46.0",
    "carbon-components-react": "^7.46.0",
    "carbon-icons": "^7.0.7",
    "gatsby": "^4.7.2",
    "gatsby-plugin-anchor-links": "^1.2.1",
    "gatsby-plugin-manifest": "^4.7.0",
    "gatsby-plugin-mdx": "^3.8.0",
    "gatsby-plugin-sharp": "^4.7.0",
    "gatsby-react-router-scroll": "^5.7.0",
    "gatsby-remark-autolink-headers": "^5.8.0",
    "gatsby-remark-classes": "^1.0.2",
    "gatsby-remark-images": "^5.0.0",
    "gatsby-remark-images-contentful": "^5.7.0",
    "gatsby-remark-mermaid": "^2.1.0",
    "gatsby-remark-plantuml": "^0.7.0",
    "gatsby-remark-prismjs": "^6.7.0",
    "gatsby-source-contentful": "^7.5.0",
    "gatsby-source-git": "^1.1.0",
    "gatsby-theme-carbon": "^2.3.0",
    "gatsby-transformer-gitinfo": "^1.1.0",
    "gatsby-transformer-sharp": "^4.7.0",
    "gatsby-transformer-sqip": "^4.7.0",
    "path": "^0.12.7",
    "postcss": "^8.1",
    "prismjs": "^1.26.0",
    "puppeteer": "^13.3.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "remark-grid-tables": "^2.1.2"
  },
  "devDependencies": {
    "gatsby-remark-code-titles": "^1.1.0",
    "gh-pages": "^3.2.3"
  }

[alisonjoseph]

Do you have a link to a repo where this is happening? I haven't seen this error before. Or can you share what is in your index.mdx file?

[dasabhisek]

We have index.js files at src/pages path (below). Also we are using git-source-remote to import .md/.mdx files from github repository and transform them into pages using gatsby-transform-remark plugin. We are using a .js template (below) to render the content of the transformed pages.

/src/pages/index.js

import HomepageTemplate from 'gatsby-theme-carbon/src/templates/Homepage';
export default HomepageTemplate;

/src/templates/project-details.js

import React from 'react';

import { Link } from 'gatsby'
import Layout from 'gatsby-theme-carbon/src/components/Layout';
import { Edit16, Warning16 } from '@carbon/icons-react'

import { HomepageBanner, HomepageCallout } from '../gatsby-theme-carbon/components/Homepage';
import useMetadata from 'gatsby-theme-carbon/src/util/hooks/useMetadata';
import LastModifiedDate from 'gatsby-theme-carbon/src/components/LastModifiedDate';
import Main from 'gatsby-theme-carbon/src/components/Main';

import '../styles/custom.scss';
import Carbon from '../images/banner.jpg';

import { graphql } from 'gatsby'


export const query = graphql`
query MyQuery($slug: String) {
  allFile(
    sort: {
      fields: relativePath
    }, 
    filter: {
      childMarkdownRemark: {
        frontmatter: {
          slug: {eq: $slug}
        }
      }
    }
  ) {
    edges {
      node {
        childrenMarkdownRemark {
          frontmatter {
            slug
            title
          }
          html
        }
        modifiedTime(formatString: "YYYY-MM-DD hh:mm")
        gitRemote {
          pathname
          ref
        }
        relativeDirectory
        name
        extension
      }
    }
    distinct(field: relativeDirectory)
  }
}
`

const linkStyles = {
  display: 'inline-block',
  margin: '0.5em 0.5rem 0px 0px',
  padding: '0.25rem'
};


const pageDetails = (props, {pageContext}) => {
	console.log("Page details: "+ JSON.stringify(props.data.allFile.edges[0].node.childrenMarkdownRemark[0]))
    const headerTitle = {
	  //title: props.data.markdownRemark.frontmatter.title
      title: props.data.allFile.edges[0].node.childrenMarkdownRemark[0].frontmatter.title
    }

    const homepageTheme  = () => "white"
    const nodeT = props.data.allFile.edges[0].node

	return (
      <Layout pageTitle={headerTitle.title} theme="white">
         <HomepageBanner
	      renderText={() => (
	         <h2>
	          {headerTitle.title}  
             </h2>
	      )}
	      image={Carbon}
	    />
        

	    <Main className="pg-main-bg">
            <div>
               <Link style={linkStyles} className="bx--link" target="_blank" rel="noopener noreferrer" 
                  to={`https://github.com${nodeT.gitRemote.pathname}/issues/new/choose`}>
                  <Warning16 aria-label="Raise Issue" className="page-menu--link" />
                  Raise Issue
               </Link>
               <Link style={linkStyles} className="bx--link" target="_blank" rel="noopener noreferrer" 
                  to={`https://github.com${nodeT.gitRemote.pathname}/tree/${nodeT.gitRemote.ref}/${nodeT.relativeDirectory}/${nodeT.name}.${nodeT.extension}`}>
                  <Edit16 aria-label="Propose change" className="page-menu--link" />
                  Propose a change
               </Link>
            </div>
			<div style={{ marginTop: "10px", paddingTop: "0px", paddingBottom: "0px"}} dangerouslySetInnerHTML={{__html: props.data.allFile.edges[0].node.childrenMarkdownRemark[0].html}}></div>
        	
			<LastModifiedDate className="bx--grid" date={props.data.allFile.edges[0].node.modifiedTime} />
			<br clear="all" />
			
		</Main>
	  </Layout>
	)
}
//<LastModifiedDate className="bx--grid" date={props.data.allFile.edges[0].node.modifiedTime} />

export default pageDetails

/gatsby-config.js

const { createFilePath } = require(`gatsby-source-filesystem`)
const path = require('path')
console.log("Current directory:", __dirname);

exports.onCreateNode = ({ node, getNode, actions }) => {
  const { createNodeField } = actions
  if (node.internal.type === `MarkdownRemark`) {
	//console.log(node)
    //const slug = createFilePath({ node, getNode, basePath: `pages` })
    const slug = path.basename(node.fileAbsolutePath, '.md')

    createNodeField({
      node,
      name: `slug`,
      value: slug,
    })
  }
}

module.exports.createPages = async ({graphql, actions}) => {
	console.log(path)
	const { createPage } = actions
	const pageTemplate = path.resolve('src/templates/project-details.js')
	const res = await graphql(`
	    query {
		  allFile(filter: {extension: {eq: "md"}}) {
		    group(field: gitRemote___name) {
		      fieldValue
		      edges {
		        node {
		          childMarkdownRemark {
		            frontmatter {
		              slug
		            }
		          }
		        }
		      }
		    }
		  }
		}
	`)

	res.data.allFile.group.forEach((g) => {
		//const group_name = g.fieldValue
		
		g.edges.forEach((edge) => {
			if (edge.node.childMarkdownRemark.frontmatter && edge.node.childMarkdownRemark.frontmatter.slug) {
				const qpath = edge.node.childMarkdownRemark.frontmatter.slug
				console.log("Create page with path:", qpath)
				createPage({
					component: pageTemplate,
					path: `${qpath}`,
					context: {
						slug: `${qpath}`
					}
				})
			}			
		})
	})
}
```

[dasabhisek]

Still waiting for the solution.