V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
xinmans
V2EX  ›  程序员

nextjs 开发的前端 next dev 没问题,但是 next build 怎么也过不了,报错很奇怪

  •  
  •   xinmans · 2023-05-24 23:16:38 +08:00 via iPhone · 1540 次点击
    这是一个创建于 533 天前的主题,其中的信息可能已经有所发展或是发生改变。
    Failed to compile.

    ./pages/index.tsx:120:37
    Type error: Property 'rev' is missing in type '{}' but required in type 'Pick<AntdIconProps, "default" | "id" | "data" | "title" | "colSpan" | "rowSpan" | "width" | "key" | "className" | "children" | "href" | "as" | "onMouseEnter" | "onTouchStart" | ... 349 more ... | "twoToneColor">'.

    118 | }}
    119 | >
    > 120 | <Menu.Item key="0" icon={<HomeOutlined />}>
    | ^
    121 | 首页
    122 | </Menu.Item>
    123 | <Menu.Item key="1" icon={<SearchOutlined />}>
    info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
    error Command failed with exit code 1.


          <Menu
              theme="dark"
              mode="inline"
              defaultSelectedKeys={["0"]}
              onClick={({ key }) => {
                setShowHome(key === "" || key === "0");
                setShowabc(key === "2");
                setShowabcd(key === "3");
                setShowSearch(key === "1");
                setShowabcde(key === "4");
                setShowAwsblogcn(key === "5");
              }}
              items={[
                {
                  key: "0",
               

      icon: <HomeOutlined />,
                  label: "首页",
                },
                {
                  key: "1",
                  icon: <SearchOutlined />,
                  label: "搜索",
                },
                {
                  key: "2",
                  icon: <AppleOutlined />,
                  label: "abc",
                },
                {
                  key: "3",
                  icon: <TwitterOutlined />,
                  label: "abc",
                },
                {
                  key: "4",
                  icon: <AppleOutlined />,
                  label: "abc",
                },
                {
                  key: "5",
                  icon: <TwitterOutlined />,
                  label: "abc",
                },
              ]}
            ></Menu>
    5 条回复    2023-05-25 22:21:08 +08:00
    hhhanako
        1
    hhhanako  
       2023-05-24 23:33:07 +08:00   ❤️ 1
    dev 的时候不会对 typescript 检查,但是 build 的时候默认会。
    你可以 1. 关闭 build 的时候对 tsc 检查,tsconfig 配置一下,但是不推荐
    2.根据报错改好代码,看起来你似乎把 rev 打错了? 全局搜索一下
    leokun
        2
    leokun  
       2023-05-25 11:45:13 +08:00
    HomeOutlined 组件不符合 icon 的签名吧
    xinmans
        3
    xinmans  
    OP
       2023-05-25 20:23:46 +08:00 via iPhone
    @leokun
    @leokun import 了,antd 的标准 icon 组件,怎会不符合规范呢

    import {
    HomeOutlined,
    AppleOutlined,
    TwitterOutlined,
    SearchOutlined,
    CloudOutlined,
    CloudServerOutlined,
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    } from "@ant-design/icons";
    xinmans
        4
    xinmans  
    OP
       2023-05-25 20:29:39 +08:00 via iPhone
    @hhhanako noEmit:ture 已经设置了,但还是报奇怪的错误
    xinmans
        5
    xinmans  
    OP
       2023-05-25 22:21:08 +08:00 via iPhone
    Fix by ChatGPT

    这个错误显示,您在菜单项中使用了 AntdIcon 组件,但未传递必需的 "rev" 属性。AntdIconProps 接口规定了必须设置 rev 属性的对象。

    要解决此问题,请确保将包含 "rev" 属性的对象传递给所有 AntdIcon 组件,并且已正确导入和声明所有类型。如果需要,您可以通过添加可选的 "rev" 属性来解决此特定错误:

    ```typescript
    <Menu.Item key="0" icon={<AntdIcon type="home" style={{ fontSize: 16 }} rev={true} />}>
    首页
    </Menu.Item>
    <Menu.Item key="1" icon={<AntdIcon type="search" style={{ fontSize: 16 }} rev={true} />}>
    搜索
    </Menu.Item>
    <Menu.Item key="2" icon={<AntdIcon type="apple" style={{ fontSize: 16 }} rev={true} />}>
    xx
    </Menu.Item>
    <Menu.Item key="3" icon={<AntdIcon type="twitter" style={{ fontSize: 16 }} rev={true} />}>
    xx
    </Menu.Item>
    <Menu.Item key="4" icon={<AntdIcon type="cloud" style={{ fontSize: 16 }} rev={true} />}>
    awsblog
    </Menu.Item>
    <Menu.Item key="5" icon={<AntdIcon type="cloud-server" style={{ fontSize: 16 }} rev={true} />}>
    awsblogcn
    </Menu.Item>
    ```

    请注意,AntdIcon 组件的 type 属性接受字符串值,表示您要显示的图标类型。示例代码中使用的图标类型是示例代码中 Ant Design 提供的一些预定义图标类型。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2704 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 12:54 · PVG 20:54 · LAX 04:54 · JFK 07:54
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.