reactjs – Cannot convert lodash library from CommonJS to ES in Vitejs

I am building a project using Vite + React + Antd.
My project has lodash library, when i build with vite build command then get an error like below:

enter image description here

Running on environment production
vite v2.9.9 building for production...
transforming (2741) node_modules\.pnpm\lodash@4.17.21\node_modules\lodash\isLength.jsUnexpected early exit. This happens when Promises returned by plugins cannot resolve. Unfinished hook action(s) on exit:
(commonjs) load "\u0000cross-fetch?commonjs-proxy"
error during build:
Error: Unexpected early exit. This happens when Promises returned by plugins cannot resolve. Unfinished hook action(s) on exit:
(commonjs) load "\u0000cross-fetch?commonjs-proxy"

In my vite.config.js file, I added @rollup/plugin-commonjs,

import commonjs from '@rollup/plugin-commonjs';
import react from '@vitejs/plugin-react';
import { defineConfig, loadEnv } from 'vite';

export default ({ mode }) => {
  const env = loadEnv(mode, 'env');
  const htmlPlugin = () => {
    return {
      name: 'html-transform',
      // Replace %VITE_X% env variables in index.html.
      transformIndexHtml(html: string) {
        return html.replace(/%(.*?)%/g, function match(_match, p1) {
          return env[p1];
        });
      },
    };
  };
  return defineConfig({
    resolve: {
      alias: [
        { find: /^~/, replacement: '' },
        { find: 'react/jsx-runtime', replacement: 'react/jsx-runtime.js' },
      ],
    },
    define: {
      'process.env': process.env,
    },
    build: {
      outDir: './build',
      rollupOptions: {
        plugins: [commonjs()],
      },
      commonjsOptions: {
        exclude: [/./],
      },
    },
    publicDir: './public',
    css: {
      preprocessorOptions: {
        less: {
          javascriptEnabled: true,
        },
      },
    },
    optimizeDeps: {
      include: ['@ant-design/icons'],
    },
    plugins: [
      htmlPlugin(),
      react({
        babel: {
          plugins: [['@babel/plugin-transform-react-jsx', { runtime: 'automatic' }]],
        },
      }),
    ],
  });
};

I tried to change lodash into lodash-es, but in my node_modules has a couple of libraries use it.
Please help me. Thank all

Read more here: Source link