如何解决gatsby插件mdx在运行onCreateNode生命周期时向React Bootstrap Alert传递代

Question

尝试传递MDX格式的代码以使用样式化组件操纵的React BootStrap Alert:进行渲染

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>

组件(已剥离(：

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

但在终端中，我收到错误消息：

/file.mdx：默认情况下不支持命名空间标记。React的JSX不支持命名空间标记。您可以设置throwIfNamespace: false以绕过此警告。

如果我删除Alert组件并在MDX文件中渲染：

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

错误不存在。代码用gatsby-remark-prismjs:突出显示

gatsby-config.js(精简(：

{
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: {},
},
},
],
},
},

研究

在我的研究中，我能找到的只有：

• 如何在React.js中打开"throwIfNamespace"标志

如何将我的MDX代码示例传递给React Bootstrap Alert以呈现为高亮显示的编码警报？

---

编辑

答案出来后，我尝试了实现：

.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"
}

并且生成相同的错误：

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

当将代码传递到React Bootstrap Alert时。

Answer 1

根据如何打开'；throwIfNamespace'；在React.js中，throwIfNamespace: false是一个选项，可以通过调整Babel的配置来设置(来自plugin-transform-react-jsx(。在Gatsby中，您可以通过在项目的根目录中设置.babelrc文件来实现它。像这样的东西应该起作用：

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

注意：您可能需要安装plugin-transform-react-jsx依赖