GatsbyJS + Netlify + MDX 加载器问题

Question

我正在使用 CMS 制作风格指南，但遇到了一些问题。

这是我的 webpack 配置

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    plugins: [
      new WebpackNotifierPlugin({
        skipFirstNotification: true,
      }),
    ],
    resolve: {
      // Enable absolute import paths
      modules: [path.resolve(__dirname, 'src'), 'node_modules'],
      extensions: ['.js', '.jsx', '.json', '.tsx'],
    },
  })
}

这是我的 package.json

    "@babel/core": "^7.2.2",
    "@material-ui/core": "^4.9.1",
    "@material-ui/icons": "^4.9.1",
    "@mdx-js/mdx": "^0.16.8",
    "@mdx-js/tag": "^0.16.6",
    "@reach/router": "^1.2.1",
    "@typescript-eslint/parser": "^2.19.0",
    "d3-ease": "^1.0.5",
    "docz-utils": "^0.13.6",
    "gatsby": "^2.0.76",
    "gatsby-image": "^2.0.20",
    "gatsby-link": "^2.2.29",
    "gatsby-mdx": "^0.3.4",
    "gatsby-plugin-catch-links": "^2.0.9",
    "gatsby-plugin-manifest": "^2.0.9",
    "gatsby-plugin-mdx": "^1.0.67",
    "gatsby-plugin-netlify-cms": "4.1.40",
    "gatsby-plugin-offline": "^2.0.16",
    "gatsby-plugin-sharp": "^2.0.14",
    "gatsby-react-router-scroll": "^2.1.21",
    "gatsby-source-filesystem": "^2.0.16",
    "gatsby-transformer-sharp": "^2.1.8",
    "hast-util-to-string": "^1.0.1",
    "jss": "^10.0.4",
    "jsx-to-string": "^1.4.0",
    "lodash": "^4.17.11",
    "marked": "^0.6.0",
    "netlify-cms-app": "2.9.1",
    "netlify-cms-widget-mdx": "^0.4.3",
    "netlify-identity-widget": "^1.5.6",
    "prismjs": "^1.15.0",
    "prop-types": "^15.6.2",
    "react": "^16.8.0",
    "react-dom": "^16.8.0",
    "react-head": "^3.0.2",
    "react-highlight": "^0.12.0",
    "react-powerplug": "^1.0.0",
    "styled-system": "^3.2.1",
    "unstated": "^2.1.1",
    "write": "^1.0.3"

这是我的组件：

interface IButtons {
  children: React.ReactElement;
}

const useStyles = makeStyles({
  root: {

  },
  button: {
    display: 'flex',
    justifyContent: 'space-between' as 'space-between',
    padding: `16px 8px`,
    paddingRight: '50px',
    background: `#F7F9FE`,
    position: 'relative' as 'relative'
  },
  expand: {
    position: 'absolute' as 'absolute',
    top: 0,
    right: 0,
    cursor: 'pointer'
  },
  code: {
    padding: `16px`,
    fontSize: `14px`
  }
});

const Buttons = (props: IButtons) => {
  const classes = useStyles();
  const [isCodeOpen, setCode] = useState(false)
  const children = React.Children.toArray(props.children)

  const stringChildren = useMemo(() => {
    let stringed: string[] | string = []

    for (let i = 0; i < React.Children.count(children); i++) {
      stringed
        .push(jsxToString(props.children[i])
        .replace('WithStyles(ForwardRef(Button))', 'Button')
        .replace('/WithStyles(ForwardRef(Button))', '/Button'))
    }

    return stringed.join("\n\n")
  }, [props.children])

  return (
    <section className={classes.root}>
      <div className={classes.button}>
        <CodeIcon className={classes.expand} fontSize='small' onClick={() => setCode(!isCodeOpen)}></CodeIcon>
        {props.children}
      </div>
      {isCodeOpen && 
        <Highlight language="javascript" className={classes.code}>
            {stringChildren}
        </Highlight>} 
    </section>
  )
}

这些是我的 UI 组件

export const UIComponents = {
  ...UI,
  DeleteIcon,
  Buttons,
  // TODO: include additional custom components here, eg:
  Janky: props => <UI.TextField {...props} placeholder={'janky'} />
}

还有我的查询

{
      resolve: "gatsby-mdx",
      options: {
        extensions: [".mdx", ".md"],
        defaultLayouts: {
          default: require.resolve("./src/components/Layout/index.tsx"),
        },
        globalScope: `
          import { UIComponents } from 'Theme'
          export default {
            ...UIComponents
          }
        `,

        // mdPlugins: [],
        // gatsbyRemarkPlugins: [{}],
      },
    },

我在启动应用程序时遇到的第一个问题是我收到此错误消息。我不确定我需要放什么装载机。

Module parse failed: The keyword 'interface' is reserved (8:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import jsxToString from 'jsx-to-string';
|
> interface IButtons {
|   children: React.ReactElement;
| }

 @ ./src/Theme.jsx 32:0-43 123:11-18
 @ ./src/cms/cms.jsx
 @ multi ./node_modules/gatsby-plugin-netlify-cms/cms.js ./src/cms/cms

第二个问题是在我的 netlify cms 预览中我得到：

Invalid MDX:
ReferenceError: Buttons is not defined

即使在应用程序本身中呈现 Buttons 组件，但在预览中却没有。

Answer 1

Gatsby 不提供开箱即用的 Typescript 支持，但您可以使用 gatsby-plugin-typescript 插件轻松添加它。

安装

npm install gatsby-plugin-typescript

如何使用

1. 在 gatsby-config.js 文件中包含插件。
2. 用 TSX 或 TypeScript 编写您的组件。
3. 一切顺利。

gatsby-config.js

module.exports = {
  // ...,
  plugins: [`gatsby-plugin-typescript`],
}