ModuleNotFoundError：找不到模块：错误：无法解析“@emotion/react”尝试将 Gatsby 与 MUI 和 Styled-Components 一起使用

Question

我正在尝试将 Gatsby 与 MUI 和 Styled-Components 结合使用。但是我收到以下错误消息： ModuleNotFoundError: Module not found: Error: Can't resolve '@emotion/react' 这是不寻常的，因为文档说样式化组件可以专门用作样式解决方案。

重现步骤：

1. run gatsby new 选择默认值和样式组件作为样式系统
2. 运行 npm install --save @mui/material @mui/styled-engine-sc styled-components 从 mui 安装 instructions for styled-components
3. 在 index.js 文件的主 div 中添加 import Button from "@mui/material/Button"; 到 imports 和 <Button variant="contained">Hello World</Button> 。来自docs.
4. 尝试 gatsby develop 但它会失败 ModuleNotFoundError: Module not found: Error: Can't resolve '@emotion/react' 这就是问题所在。

我尝试了什么：

• 我试过 npm i --save @emotion/react @emotion/styled 并且按钮呈现，但我不确定它是否呈现样式组件或情感，可能是情感。
• 我尝试将 @mui/styled-engine 别名为 @mui/styled-engine-sc 样式组件的包装器，如 here in the mui docs 和 here in the Gatsby docs 但我不认为那是与我的问题有关，因为如果有的话，我需要将@emotion/styled 别名为其他包。
• 我查看了 Gatsby 主题 materialui，但其中提到了 SSR，文档说 SSR 不适用于样式化组件和 npm here。我必须使用 Yarn 吗？

相关问题：

• material-ui-v5-not-working-styled-components-and-typescript
• 使用材料 ui 主题与样式组件

相关Github示例.