如何在使用 vite 搭建的项目（vite+react+ts）中使用 alibaba Formily ？

Question

1.使用 vite 搭建一个 react+ts 的项目（yarn create vite）
2.按照 Formily 官方文档快速开始（https://v2.formilyjs.org/zh-CN/guide/quick-start）使用 Formily。

运行项目报错 [plugin:vite:css] [less] '~antd/es/style/themes/index.less' wasn't found.

vite.config.js 配置如下：

export default defineConfig({
  plugins: [react()],
  css: {
    preprocessorOptions: {
      less: {
        modifyVars: {
          hack: 'true; @import "src/assets/style/global.less";',
          'root-entry-name': 'default',
        },
        javascriptEnabled: true,
      }
    }
  }
})

package.json

  "dependencies": {
    "@formily/antd": "^2.2.20",
    "@formily/core": "^2.2.20",
    "@formily/react": "^2.2.20",
    "antd": "^5.3.1",
    "less": "^4.1.3",
    "moment": "^2.29.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.27",
    "@types/react-dom": "^18.0.10",
    "@vitejs/plugin-react": "^3.1.0",
    "typescript": "^4.9.3",
    "vite": "^4.1.0"
  }

在百度上检索了很久，感觉是 antd 版本问题，又或许是 vite 和 formily 就不搭。不知道如何解决，往指教！！！

Answer 1

Vite 和 Formily 存在不兼容的问题，使用 React 脚手架搭建的项目不会出现这个问题。
如果一定要同时去使用，可以使用 lerna 来管理各个 package。

Answer 2

正好最近在使用Vite + react + formily. 遇到了相同的问题。下面是我的解决方法，希望对你有帮助。

1. antd 的版本不对。 formily 目前使用antd 最高版本是 4.22.8. 可以在github 上看到 "antd": "<=4.22.8"
2. 安装正确的版本后修改一下vite.config.ts，加上css 和 alias的配置，如下：

export default defineConfig({
  plugins: [react()],
  css:{
    preprocessorOptions:{
      less: {
        javascriptEnabled: true,
      }
    }
  },
  resolve:{
    alias:[
      {
        find:/^~/,
        replacement:'',
      },
    ]
  }
})