No such file or directory, when using Vite and Antd Pro Layout

Question

This is file vite.config.ts:

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

export default defineConfig({
  plugins: [
    reactRefresh(),
    vitePluginImp({
      libList: [
        {
          libName: 'antd',
          style: (name) => {
            return `antd/lib/${name}/style/index.less`;
          },
        },
      ],
    }),
  ],
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
        modifyVars: {
          ...{
            'primary-color': '#1DA57A',
            'link-color': '#1DA57A',
            'border-radius-base': '2px',
          },
        },
      },
    },
  },
  resolve: {
    alias: [
      {
        find: /^~/,
        replacement: path.resolve(__dirname, 'src'),
      },
    ],
  },
  optimizeDeps: {
    include: ['@ant-design/icons'],
  },
});

This is my config to using antd, antd-pro-layout with vite.

But I received the error:

[vite] Internal server error: ENOENT: no such file or directory, open 
'/Users/tranthaison/DEV/vite2-react-ts/srcantd/es/style/themes/default.less'

Can someone help me to fix it?

This is my error [vite] Internal server error: ENOENT: no such file or directory, open '/Users/tranthaison/DEV/vite2-react-ts/srcantd/es/style/themes/default.less' — Thai Son, Mar 29 '21 at 02:22

Laode Muhammad Al Fatih · Answer 1 · 2022-03-26T12:38:07.160

I had some problems when using React + Antd in Vite.

Thanks for @theprimone for the answer. But the answer is incomplete. I will complete the answer here.

First time, add additional config to Less Preprocessor:

Add this config to your vite.config.js file:

{
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
      },
    },
  },
}

Second, setting module aliases to fix Less @import problem:

Again, add the following config into your vite.config.js file:

{
  resolve: {
    alias: [
      { find: /^~/, replacement: "" },
    ],
  },
}

Last, install vite-plugin-imp plugin to solve Antd ES problem:

Install the vite-plugin-imp dependencies:

pnpm add -D vite-plugin-imp

# or

npm i -D vite-plugin-imp

then, setup the plugin in your vite.config.js file:

{
  plugins: [
    // React plugin here
    
    vitePluginImp({
      libList: [
        {
          libName: "antd",
          style: (name) => `antd/es/${name}/style`,
        },
      ],
    }),
  ];
}

The final configuration in vite.config.js file will look like this:

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

export default defineConfig({
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
      },
    },
  },
  resolve: {
    alias: [
      { find: /^~/, replacement: "" },
    ],
  },
  plugins: [
    reactRefresh(),
    vitePluginImp({
      libList: [
        {
          libName: "antd",
          style: (name) => `antd/es/${name}/style`,
        },
      ],
    }),
  ],
});

Also work with @preact/preset-vite.

Ref:

When using `(name) => `antd/es/${name}/style`` my pre-bundling time has increased in time because it was importing all of the `antd/es` styles by separately. Could fix it by using `name => `antd/es/${name}/style/index.less``. — DrunkOldDog, Aug 24 '21 at 15:28

score 2 · Answer 2 · answered Apr 09 '21 at 09:40

Try to import antd styles like this:

vitePluginImp({
  libList: [
    {
      libName: 'antd',
      style: (name) => `antd/es/${name}/style`,
    },
  ],
}),

More usage of Vite + React + Ant Design or other UI Library, this repo theprimone/vite-react might give you more or less inspiration.

No such file or directory, when using Vite and Antd Pro Layout

2 Answers2