How to resolve gatsby-plugin-mdx threw an error while running the onCreateNode lifecycle when passing code to a React Bootstrap Alert?

Question

Trying to pass MDX formatted code to render with a React BootStrap Alert manipulated with Styled Components:

MDX:

import AlertMessage from '../src/components/AlertMessage'

<AlertMessage variant={'danger'}>
  \```html
  <b>This is a bold</b>
  \```
</AlertMessage>

<AlertMessage variant={'success'}>
  \```html
  <span class="bold">This is a bold</span>
  \```
</AlertMessage>

Component (stripped down):

import React from 'react'
import PropTypes from 'prop-types'
import { Alert } from 'react-bootstrap'
import styled from 'styled-components'

const MessageContainer = styled.div`
  display: flex;
  margin-bottom: ${({ theme }) => theme.spacings.xxSmall};
`

const AlertMessage = ({ variant, children }) => {
  return (
    <MessageContainer>
    <Alert variant={variant}>
      {children}
    </Alert>
    </MessageContainer>
  )
}

AlertMessage.propTypes = {
  variant: PropTypes.string,
  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
}

export default AlertMessage

but in the terminal I get the error message of:

/file.mdx: Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can set throwIfNamespace: false to bypass this warning.

If I remove the Alert component and render in the MDX file:

\```html
<b>This is a bold</b>
\```

\```html
<span class="bold">This is a bold</span>
\```

the error isn't present. The code is highlighted with gatsby-remark-prismjs:

gatsby-config.js (stripped down):

{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `foo`,
    path: `${__dirname}/foo/`,
  },
},
{
  resolve: `gatsby-plugin-mdx`,
  options: {
    extensions: [`.md`, `.mdx`],
    gatsbyRemarkPlugins: [
      {
        resolve: `gatsby-remark-images`,
        options: {
          maxWidth: 1000,
          quality: 95,
          linkImagesToOriginal: false,
          markdownCaptions: true,
          withWebp: true,
          wrapperStyle: 'overflow:hidden; display:block;',
        },
      },
    ],
  },
},
{
  resolve: `gatsby-transformer-remark`,
  options: {
    plugins: [
      {
        resolve: `gatsby-remark-prismjs`,
        options: {
          classPrefix: 'language-',
          inlineCodeMarker: null,
          showLineNumbers: true,
          noInlineHighlight: false,
          languageExtensions: [
            {
              language: 'superscript',
              extend: 'javascript',
              definition: {
                superscript_types: /(SuperType)/,
              },
              insertBefore: {
                function: {
                  superscript_keywords: /(superif|superelse)/,
                },
              },
            },
          ],
          prompt: {
            user: 'root',
            host: 'localhost',
            global: false,
          },
          escapeEntities: {},
        },
      },
    ],
  },
},

Research

In my research all I was able to find was:

How to turn on the 'throwIfNamespace' flag in React.js

How can I pass my MDX code examples to a React Bootstrap Alert to render as a highlighted coded alert?

Edit

After the answer I tried the implementation of:

.babelrc:

{
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    [
      "@babel/plugin-transform-react-jsx",
      {
        "throwIfNamespace": false
      }
    ]
  ],
  "presets": [
    [
      "babel-preset-gatsby",
      {
        "targets": {
          "browsers": [">0.25%", "not dead"]
        }
      }
    ]
  ]
}

package.json:

  "devDependencies": {
    "@babel/plugin-proposal-decorators": "^7.18.10",
    "@babel/plugin-transform-react-jsx": "^7.18.10",
    "babel-preset-gatsby": "^2.20.0",
    "prettier": "^2.7.1"
  }

and the same error is generated:

"gatsby-plugin-mdx" threw an error while running the onCreateNode lifecycle:

file.mdx: Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can set `throwIfNamespace: false` to bypass this warning.

when passing code to React Bootstrap Alert.

Ferran Buireu · Accepted Answer · 2022-08-07T09:42:57.657

According to How to turn on the 'throwIfNamespace' flag in React.js the throwIfNamespace: false is an option that can be set tweaking Babel's configuration (from plugin-transform-react-jsx). In Gatsby, you can achieve it by setting a .babelrc file in the root of your project. Something like this should work:

{
  "plugins": [
    [
      "@babel/plugin-transform-react-jsx", {
        "throwIfNamespace": false
      }
    ]
  ],
  "presets": [
    [
      "babel-preset-gatsby",
      {
        "targets": {
          "browsers": [">0.25%", "not dead"]
        }
      }
    ]
  ]
}

Note: you may need to install plugin-transform-react-jsx dependency

How to resolve gatsby-plugin-mdx threw an error while running the onCreateNode lifecycle when passing code to a React Bootstrap Alert?

Research

Edit

1 Answers1