Function 'each' is undefined antd Vite with React

Question

I´m getting this error in React when importing some components from antd library.

Looks like the error is at: \node_modules\antd\es\input\style\status.less:7:0 (See the picture attached)

Examples of imported components that make the bug show up: Table, Input.

Examples of imported components that have no effect to cause the bug: Col, Row, Progress, Menu, Button...

I created the project using Vite 2.8.6

Libs installed:

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

I noticed that the bug started to happen after I customized the antd theme using the plugin vite-plugin-imp How to change antd theme in Vite config? , and adding some configuration in the vite.config.ts file, I´ll show it below. Before I added the custom theme configuration, it was displaying all the antd components normally (but of course, with the default theme, which I dont want to).

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

Turns out that my less dependency installed was too old "2.7.2", The each() function was added in Less v3.7.0. So I updated it and it worked :)