Gatsby中的production build中的prism-react-renderer高亮显示问题

Question

在使用Gatsby中的prism-react-renderer组件时，我遇到了代码突出显示的问题。我已经按照FormidableLabs/prism-react-renderer中的说明进行了配置。

一切都在开发模式下工作，但是当我使用gatsby build命令构建生产版本时，pre标记没有用棱镜类装饰(缺少class="prism-code language-python")。我的猜测是，生产构建没有包含正确的组件或CSS，但我不知道从哪里开始查找。

而且，当我在7-8个月前的另一个项目中使用相同的代码时，这个问题并不存在。因此，由于插件/组件更新，这可能是过去几个月引入的问题。

附件中有两个截图-一个是gatsby develop的截图，另一个是gatsby build的截图。

我运行这些命令来设置和安装必备组件：

> gatsby new test-mdx-prism-rendering https://github.com/gatsbyjs/gatsby-starter-hello-world
> npm install --save gatsby-plugin-mdx @mdx-js/mdx @mdx-js/react
> npm install --save mdx-utils
> npm install --save prism-react-renderer

subhashb/test-mdx-prism-rendering上提供了示例GitHub项目

​

​

Answer 1

当我试图更深入地挖掘时，我找到了答案。

这里讨论了解决方法：https://github.com/ChristopherBiscardi/gatsby-mdx/issues/394

显然，在gatsby-browser.js中定义的wrapRootElement也应该在gatsby-ssr.js中可用。