React 18.2.0集成ag-grid-react v29生产环境失败求助

问题描述 #

近期将React项目升级至18.2.0，同时把ag-grid-react从v24版本升级到v29版本。开发模式下项目运行正常，但生产环境中仅导入ag-grid-react就会导致项目失败，代码逻辑本身无问题。

代码示例 #

import {AgGridReact} from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

const DashboardPage = () =>{
   return(
    <div className="ag-theme-material">
          <AgGridReact
            enableRtl={true}
            columnDefs={columnDefs}
            defaultColDef={{ unSortIcon: true }}
            rowData={rowData}
            infiniteInitialRowCount={100}
            rowHeight={37}
            overlayLoadingTemplate={overlayLoadingTemplate}
            overlayNoRowsTemplate={overlayNoRowsTemplate}
            pagination={true}
            paginationPageSize={PASARGAD ? 40 : 15}
            localeText={{ to: 'To', of: 'Of', page: 'Page' }}
            rowSelection={'multiple'}
            onPaginationChanged={handlePagination}
            suppressRowClickSelection={true}
            onCellValueChanged={onCellValueChanged}
            onSelectionChanged={onSelectionChanged}
            onGridReady={onGridReady}/>
        </div>
)};

报错截图 #

解决方案 #

• 调整构建工具的Tree Shaking配置
  ag-grid-react v29采用ES模块规范，部分构建工具（Webpack、Vite等）在生产环境的Tree Shaking可能误删了ag-grid的必要代码。可以在配置文件中对ag-grid相关包做特殊处理：

  • Webpack配置示例：

    module.exports = {
      optimization: {
        usedExports: true,
        sideEffects: false
      },
      module: {
        rules: [
          {
            test: /\.js$/,
            include: /node_modules\/(ag-grid-react|ag-grid-community)/,
            sideEffects: true
          }
        ]
      }
    };
    

  • Vite配置示例：

    export default {
      build: {
        rollupOptions: {
          external: ['ag-grid-react', 'ag-grid-community'],
          output: {
            globals: {
              'ag-grid-react': 'AgGridReact',
              'ag-grid-community': 'AgGridCommunity'
            }
          }
        }
      }
    };
    

• 统一ag-grid相关依赖版本
  确保ag-grid-react、ag-grid-community（及ag-grid-enterprise如果使用）的版本完全一致，v29版本要求所有ag-grid包版本统一，版本不匹配会引发生产构建的依赖冲突。执行以下命令重新安装统一版本：

  npm install ag-grid-react@29.3.2 ag-grid-community@29.3.2 --save
  

  （版本号可根据官方最新稳定版调整）

• 排查代码压缩混淆问题
  临时关闭生产构建的代码压缩（如Terser），确认是否是压缩过程破坏了ag-grid内部代码。如果关闭后恢复正常，需在压缩工具配置中排除ag-grid相关文件：
  Webpack的Terser配置示例：

  module.exports = {
    optimization: {
      minimizer: [
        new TerserPlugin({
          exclude: /node_modules\/(ag-grid-react|ag-grid-community)/
        })
      ]
    }
  };
  

• 关闭React 18并发模式（临时排查）
  ag-grid-react v29已兼容React 18，但部分旧自定义组件或配置可能和并发模式冲突。可以尝试在渲染时关闭并发模式：

  import { createRoot } from 'react-dom/client';
  const root = createRoot(document.getElementById('root'));
  root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
    { concurrentUpdatesByDefault: false }
  );
  

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