javascript - 函数 'each' 未定义 antd Vite with React

Question

从 antd 库导入一些组件时，我在 React 中遇到这个错误。

看起来错误在:\node_modules\antd\es\input\style\status.less:7:0(见附图)

导致错误出现的导入组件示例:表、输入。

没有影响导致错误的导入组件示例:Col、Row、Progress、Menu、Button...

我使用 Vite 2.8.6 创建了项目

安装的库:

“ react ”:“^17.0.2”，"less": "2.7.2","antd": "^4.19.2""vite-plugin-imp": "^2.1.6"

我注意到这个bug是在我使用插件vite-plugin-imp自定义antd主题后开始出现的How to change antd theme in Vite config? ，并在 vite.config.ts 文件中添加一些配置，我将在下面展示。在我添加自定义主题配置之前，它正常显示所有 antd 组件(当然，使用默认主题，这是我不想显示的)。

import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';
import vitePluginImp from 'vite-plugin-imp';

export default defineConfig({
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
        modifyVars: {
          'primary-color': '#97D700',
          'border-radius-base': '7px',
          'font-family': 'Rubik',
        },
      },
    },
  },
  resolve: {
    alias: [{ find: /^~/, replacement: '' }],
  },
  plugins: [
    react(),
    vitePluginImp({
      libList: [
        {
          libName: 'antd',
          style: (name) => `antd/es/${name}/style`,
        },
      ],
    }),
  ],
});

Answer 1

原来我安装的less依赖太旧了"2.7.2"，each()函数是在Less v3.7.0 。所以我更新了它并且它起作用了:)