Javascript 如何修复“上的警告错误”；“出口”；来自盖茨比？

我试图从其他道具加载我的文件，但当我想执行我的代码时，我在终端中得到了一个错误“warn”，但我在函数中使用export作为下面的代码。 我的错误是：

warn "export 'MenuButton' was not found in '../buttons/MenuButton'

我的菜单按钮代码来自盖茨比

import React from "react"
import styled from "styled-components"
import { Link } from "gatsby"

export default function MenuButton(props) {
  const { item } = props
  return (
    <Link to={item.link}>
      <MenuItem title={item.title}>
        <img src={item.icon} alt={item.title} />
        {item.title}
      </MenuItem>
    </Link>
  )
}

const MenuItem = styled.div`
  color: rgba(255, 255, 255, 0.7);
  display: grid;
  grid-template-columns: 24px auto;
  gap: ${props => (props.title ? "10px" : "0px")};
  align-items: center;
  padding: 10px;
  border-radius: 10px;
  transition: 0.5s ease-out;

  :hover {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1),
      inset 0px 0px 0px 0.5px rgba(255, 255, 255, 0.2);
  }
`

从“React”导入React
从“样式化组件”导入样式化
从“盖茨比”导入{Link}
导出默认功能菜单按钮（道具）{
常量{item}=props
返回(
{item.title}
)
}
const MenuItem=styled.div`
颜色：rgba（255，255，255，0.7）；
显示：网格；
网格模板列：24px自动；
差距：${props=>（props.title？“10px”：“0px”）}；
对齐项目：居中；
填充：10px；
边界半径：10px；
过渡：0.5s缓解；
：悬停{
背景：rgba（255，255，255，0.1）；
盒子阴影：0px 10px 20px rgba（0,0,0,0.1），
插入0px 0px 0px 0.5px rgba（255、255、255、0.2）；
}
`

---

如您所见，我使用了导出，但收到了警告，无法执行该警告。

您似乎正在使用相对导入，但需要允许webpack理解它们。你可以：

---

类似这样的操作应该可以做到。

您也可以在页面底部导出默认菜单按钮，只需调用函数函数菜单按钮查看它是否有助于显示您是否正在导入它？

exports.onCreateWebpackConfig = ({ actions, loaders, getConfig }) => {
  const config = getConfig();

  actions.setWebpackConfig({
    resolve: {
      modules: [path.resolve(__dirname, 'src'), 'node_modules', './']
    }
  })
};