如何将 Vite 与 Yarn 工作区结合使用？

Question

在我的工作场所，我们试图让 Vite 与 Yarn Workspaces（在 Yarn v2 中）一起使用。

我们想要创建一个测试环境，在其中使用从同一存储库但不同工作区发布的包之一。为了显示：

packages
   package-a
   package-b

package.json这些包主要是这样引用的：

packages
   package-a
   package-b

where 是这样引用package-b的：package-apackage-bpackage.json

{
  ...
  "workspaces" : [
    "packages/package-a",
    "packages/package-b"
  ]
  ...
  "packageManager": "yarn@3.3.1"
}

但我们发现，当在 Vite 中运行应用程序时，该包没有被加载到浏览器中。这导致了如下错误：

Uncaught SyntaxError: The requested module ... does not provide an export named ...

仅在运行时，但 TypeScript 和 ESLint 对我们的导入非常满意。

请参阅下面我的回答以找出我们的解决方案。

Answer 1

Yarn 使用符号链接来链接到本地​​工作区。Vite 似乎并不能很好地处理这个问题。

通过设置中的preserveSymlinksvite.config.ts选项，我们能够解决这个问题。

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    preserveSymlinks: true // this is the fix!
  }
});