Yarn3.1 PnP模式搭配Vite2.9运行提示找不到vite包如何解决

使用Vite构建应用时遇到依赖解析报错，初步判断问题源于Yarn PnP的依赖解析机制：该模式下不会生成node_modules目录，Vite无法识别该模式下的依赖路径，需要通过配置让Vite适配无node_modules的Yarn PnP模式。

更新：已提供可复现问题的测试用例。测试发现若移除package.json中的"type": "module"配置，报错就会消失，但该操作的触发原因暂不明确，还会给Node后端项目带来其他兼容问题，无法采用。

报错复现 #

执行命令：

$ yarn run vite --config vite.config.js

输出报错：

Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'vite' imported from /Users/me/project/vite.config.js
Did you mean to import vite-virtual-ec56a6c02a/0/cache/vite-npm-2.9.13-cda1bb45b9-a5e501b920.zip/node_modules/vite/dist/node/index.js?
    at new NodeError (node:internal/errors:377:5)
    at packageResolve (node:internal/modules/esm/resolve:910:9)
    ...

对应vite.config.js片段：

// vite.config.js excerpt
import { defineConfig } from 'vite';

export default defineConfig(({ command, mode }) => {
  // 业务配置内容
});

报错核心原因：Yarn PnP通过注入自定义解析逻辑实现无node_modules的依赖查找，但Node原生ESM加载模式下不会自动加载该解析钩子。当package.json配置"type": "module"时，vite.config.js会以ESM模式执行，此时PnP解析规则未生效，就会抛出找不到包的错误。

两种可直接落地的修复方案：

方案1：使用Yarn官方PnP兼容工具（推荐） #

• 安装开发依赖：

yarn add @yarnpkg/pnpify -D

• 调整package.json中的脚本命令，所有调用vite的命令前增加pnpify前缀：

{
  "scripts": {
    "dev": "pnpify vite",
    "build": "pnpify vite build",
    "preview": "pnpify vite preview"
  }
}

• 手动执行带自定义参数的vite命令时，同样加pnpify前缀即可：

yarn pnpify vite --config vite.config.js

方案2：手动注入PnP解析逻辑 #

不需要安装额外依赖，直接在vite.config.js的最顶部（必须在所有其他import语句之前）引入Yarn安装依赖时自动生成的PnP注册文件：

// 该行必须放在所有导入语句的最顶部
import './.pnp.cjs';
import { defineConfig } from 'vite';

export default defineConfig(({ command, mode }) => {
  // 原有配置逻辑保持不变
});

说明：执行yarn install后项目根目录会自动生成.pnp.cjs文件，不需要手动创建。

内容的提问来源于stack exchange，提问作者Michael Johansen