Home/ Questions/Q 2957
In Process
Kane Williamson
Asked: 2022-08-07T09:59:03+00:00

How to resolve throwIfNamespace: false in React Bootstrap Alert when passing MDX code examples?

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 can I pass my MDX code examples to a React Bootstrap Alert to render as a highlighted coded alert?

bootstrapmdx
Share

1 Answer

  1. 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

    • 0

Leave an answer

You must login to add an answer.

Need An Account,