在NextJS 14+TypeScript中安装AG-Grid遇路径导出错误求助

问题原因 #

AG-Grid v30及以上版本调整了资源导出结构，原./dist/styles/路径不再被包导出，导致NextJS严格的模块解析机制抛出错误。

解决方案 #

1. 修改样式导入路径 #

将原来的dist/styles路径改为styles，去掉中间的dist目录：

'use client'; // 仅App Router需要，声明为客户端组件
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

2. 适配NextJS App Router（若使用） #

• 如果组件位于App Router目录下，必须添加'use client'指令，因为AG-Grid是客户端渲染组件，无法在服务器组件中运行。
• 全局样式可统一放在根layout.tsx中导入，但需确保layout.tsx添加'use client'或把样式导入放在客户端组件内。

3. 重置依赖（若上述方法无效） #

修改路径后仍有问题的话，尝试清除依赖缓存并重新安装：

npm uninstall ag-grid-community ag-grid-react
rm -rf node_modules package-lock.json
npm install ag-grid-community ag-grid-react

内容的提问来源于stack exchange，提问作者Avik Ghosh