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 ( (

{headerTitle.title}

)} image={Carbon} />

Raise Issue Propose a change

) } // 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.