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

[Derek Reynolds]

Describe the bug
Parsing any mdx files in src/pages causes this parsing error during gatsby develop.

  SyntaxError: unknown: Identifier '_frontmatter' has already been declared (85:  13)
    83 | MDXContent.isMDXComponent =   true;
    84 |
  > 85 | export const _fron  tmatter = {};
       |              ^
    86 |

To Reproduce
https://codesandbox.io/s/pj1k8r410j

1. Go to https://codesandbox.io/s/pj1k8r410j
2. Rebuild container (effectively run gatsby develop
3. See error in stdout

Expected behavior
Build should succeed and dev server is running.

Screenshots

[Chris Biscardi]

MDX 1.0 changed the default wrapper to be React.Fragment and also merged defaultLayouts with wrappers so they are the same thing now. The warning can be solved by using MDXProvider to only pass children through to the fragment.

// gatsby-browser.js
import React from "react"
import { MDXProvider } from "@mdx-js/react"

const components = {
	wrapper: ({children}) => <>{children}</>
}
export const wrapRootElement = ({ element }) => {
  return (
    <MDXProvider components={components}>
      {element}
    </MDXProvider>
  )
}

• Here's a video explaining how to do it.
• Here's a working repo with the changes you'll need to make.

[Chris Biscardi]

wait, I think I misread this. already declared is a different issue. I know what's happening, hang on.

[Derek Reynolds]

So it's a default/expectation that all projects using gatsby-mdx need to include the wrapper replacement in gatsby-browser.js or is this only if you need custom components?

[Derek Reynolds]

Also I just realized removing @mdx-deck/gatsby-theme gets things working. I realize everything just dropped like 2 hours ago, but is the expectation that I can/should be able to use the new mdx-deck gatsby theme and a top-level gatsby-mdx configuration even though the mdx-deck theme uses and configures it as an implementation detail?

[Chris Biscardi]

@derekr still working out what gatsby-mdx's recommendation should be there. It's possible that we could solve it at the library level instead and not have to tell anyone to do anything.

In the meantime, yeah it's expected that if you run into this issue you'd replace the wrapper in your own project.

[Chris Biscardi]

Also I just realized removing @mdx-deck/gatsby-theme gets things working

My guess is that this is related to having multiple gatsby-mdx plugins. We could ask @jxnblk to add an option to disable the one in the theme as a short-term fix. In the long-term this needs to be solved on either the Gatsby level (allowing plugins to determine how many instances they are allowed to have and how to merge the options) or on the gatsby-mdx level, if we can figure out how to ensure that multiple instances of gatsby-mdx can coexist.

[Brent Jackson]

On it 🕵🏻‍♂️jxnblk/mdx-deck#325

[Derek Reynolds]

So fast!!! Y'all are amazing. This is like the dream setup now. Confirmed fix on my end.

[Chris Biscardi]

cool, going to close this here then :)

[Bryce Wray]

Still seeing this occur. Installed gatsby-plugin-mdx in the default starter and got this message (after gatsby develop) upon adding a single .mdx file:

 ERROR

UNHANDLED REJECTION unknown: Identifier '_frontmatter' has already been declared (105:13)

  103 | MDXContent.isMDXComponent = true;
  104 |
> 105 | export const _frontmatter = {};
      |              ^
  106 |



  SyntaxError: unknown: Identifier '_frontmatter' has already been declared (105:13)
    103 | MDXContent.isMDXComponent = true;
    104 |
  > 105 | export const _frontmatter = {};  m
        |              ^
    106 |

...followed by a host of other messages such as:

  - index.js:6325 Object.raise
    [gatsby_site_css-grid_mdx]/[@babel]/parser/lib/index.js:6325:17

  - index.js:3759 ScopeHandler.checkRedeclarationInScope
    [gatsby_site_css-grid_mdx]/[@babel]/parser/lib/index.js:3759:12

  - index.js:3725 ScopeHandler.declareName
    [gatsby_site_css-grid_mdx]/[@babel]/parser/lib/index.js:3725:12

So what is the official fix now?

[Ben Buchanan (200ok)]

I'm getting that error any time I try to specify a layout in gatsby-config.js. Remove the config and it works, add the config and it blows up.

[Kendrick Arnett]

I'm getting that error any time I try to specify a layout in gatsby-config.js. Remove the config and it works, add the config and it blows up.

Same here… @ChristopherBiscardi, any guidance?

[Kendrick Arnett]

Fixed the issue I was having: the gatsby-config I was cribbing from wasn't wrapping defaultLayouts in an options object. Seems to be working fine now.

@ChristopherBiscardi, this project is so helpful—thanks for your work on it and for your involvement with Gatsby in general.

[Jason Lengstorf]

I’m hitting this error now using 1.0.34. I have a theme that uses MDX, and I want the site that implements the theme to also use gatsby-plugin-mdx for unrelated pages.

Is there a pattern available to support this, or should I try to figure something else out?

[Kia Storm]

I'm getting this error also when trying to use 3 different themes that use MDX.

gatsby-theme-notes (official gatsby theme)
gatsby-theme-blog (official gatsby theme)
gatsby-theme-documentation (johno)

Does anyone have a fix or workaround??

[John Otander]

Right now you can configure the themes to only configure MDX like so:

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-theme-notes',
      options: {
        mdx: false
      }
    },
    {
      resolve: 'gatsby-theme-blog',
      options: {
        mdx: false
      }
    },
    'gatsby-theme-documentation'
  ]
}

We know this isn't an ideal situation and will be working on making the composition story with gatsby-plugin-mdx better.