React Vite启动报错：@popperjs/core模块文件无法解析

AI 小北

2026-7-17

解决React+Vite项目中@popperjs/core模块解析失败的问题

以下是针对构建时出现的@popperjs/core模块解析错误的几种可行解决方案：

锁定兼容版本的@popperjs/core
Vite对ES模块的处理可能与部分新版本@popperjs/core存在适配问题，建议安装经过验证的稳定版本：
```
npm install @popperjs/core@2.11.8
# 或使用yarn
yarn add @popperjs/core@2.11.8
# 或pnpm
pnpm add @popperjs/core@2.11.8
```

配置Vite解析规则
在vite.config.js中添加别名和依赖优化配置，强制Vite识别@popperjs/core的ES模块入口：

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

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@popperjs/core': '@popperjs/core/dist/esm/index.js',
    },
  },
  optimizeDeps: {
    include: ['@popperjs/core'],
  },
});

清理依赖缓存并重装
依赖缓存或损坏的安装文件可能导致解析错误，执行以下步骤重置依赖：
```
# 删除node_modules和锁文件
rm -rf node_modules package-lock.json
# 重新安装依赖
npm install
```
若使用pnpm，可替换为：
```
pnpm store prune
pnpm install
```
统一依赖版本解决冲突
若项目中其他UI库（如Bootstrap、Material-UI）自带了@popperjs/core，可能出现版本冲突。先查看依赖树确认冲突：
```
npm ls @popperjs/core
```
然后在package.json中添加overrides强制统一版本：
```
"overrides": {
  "@popperjs/core": "2.11.8"
}
```
添加后重新执行依赖安装命令。