🐛[BUG]Cannot read properties of undefined (reading '0')

[netcore-jroger]

🐛 bug 描述

Cannot read properties of undefined (reading '0')

📷 复现步骤

1. 使用 vite 启动项目代码
2. 查看控制台报错日志

🏞 期望结果

正常渲染 ProLayout

💻 复现代码

参见：https://stackblitz.com/edit/vitejs-vite-tmydrg?file=package.json,src%2FApp.tsx

© 版本信息

• ProComponents 版本: 2.3.7
• "@ant-design/pro-layout": "^7.0.5",
• "react": "^18.2.0",
• "react-dom": "^18.2.0",
• umi 版本: 未使用 umi
• 浏览器环境 Microsoft Edge 版本 105.0.1343.34 (正式版本) beta (64 位)
• 开发环境 Windows 11

🚑 其他信息

构建工具：vite v3.1.0

[lzm0x219]

+1

[lzm0x219]

"@ant-design/pro-components": "2.3.7",
"@ant-design/pro-layout": "6.38.22",

ProLayout组件先用@ant-design/[email protected]先顶着，其他组件用components包

[netcore-jroger]

是的 @ant-design/pro-layout 6.x 的版本是没有问题的。

[lzm0x219]

是的 @ant-design/pro-layout 6.x 的版本是没有问题的。

等作者fix了😼

[hylerrix]

Mark, 就 CRA 新项目安装了下 pro-layout 就有这个问题，期待早点 Fix, 本来还想在正式环境升级 v7 立马用上呢！

此外，我已经跑起来的 pro-layout v6 版本直接在仓库中升级为 v7，倒是能继续跑起来看到新的透明导航 CSS 出现了 ，但是 routes 导航数组按照 v6 的方式传进去后 v7 版没有显示到前端 UI 上...

[netcore-jroger]

第二次断点进入的时候为 undefined. 断点的时候能看到渲染出来了，后面报错后界面又没有了

[sushi-su]

去掉 react 18 的严格模式

[netcore-jroger]

去掉 react 18 的严格模式

去掉严格模式可以了，请问能讲一下原因吗？

[sushi-su]

等 swr 更新 v2 后可解 https://github.com/vercel/swr/issues/1904

[netcore-jroger]

等 swr 更新 v2 后可解 vercel/swr#1904

谢谢

[helllth]

II upgraded to [email protected] and that helped 🙏

[arifszn]

Same issue with vite 3.1.7.

[franka107]

it worked for me:

package.json

    "@ant-design/icons": "^4.7.0",
    "@ant-design/pro-layout": "^7.1.8",
    "@types/antd": "^1.0.0",
    "antd": "^4.23.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "swr": "2.0.0-rc.0"
  },

vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "path";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
      },
    },
  },
  resolve: {
    alias: [
      {
        find: /^~/,
        replacement: "",
      },
      {
        find: "@",
        replacement: path.resolve(__dirname, "./src"),
      },
    ],
  },
});

[dingyanhe]

+1

[arifszn]

it worked for me:

package.json

    "@ant-design/icons": "^4.7.0",
    "@ant-design/pro-layout": "^7.1.8",
    "@types/antd": "^1.0.0",
    "antd": "^4.23.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "swr": "2.0.0-rc.0"
  },

vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "path";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
      },
    },
  },
  resolve: {
    alias: [
      {
        find: /^~/,
        replacement: "",
      },
      {
        find: "@",
        replacement: path.resolve(__dirname, "./src"),
      },
    ],
  },
});

@franka107 Have you turned off react strict mode?

[xezzon]

版本 2.3.28 ，问题依然存在。

[samotoo]

pro-layout依赖的还是swr 1，目前看来只有先override这个版本，或者去掉StrictMode绕一下了。