解决React-Virtualized与Vite的bpfrpt_proptype_WindowScroller导入错误

问题根源 #

react-virtualized 9.x版本的ES模块中，prop-types的导出方式与Vite的ES模块解析逻辑不兼容，导致onScroll.js中无法找到bpfrpt_proptype_WindowScroller的匹配导出。

解决方案 #

方案一：切换到CommonJS版本的react-virtualized

修改vite.config.js的resolve.alias配置，将react-virtualized的ES模块路径映射到CommonJS版本：

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

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      // 全局替换ES模块为CommonJS版本
      'react-virtualized/dist/es': 'react-virtualized/dist/commonjs'
    }
  },
  optimizeDeps: {
    include: ['react-virtualized']
  }
});

CommonJS版本的导出结构更稳定，能绕过Vite解析ES模块时的导出匹配问题。

方案二：自定义Rollup插件修复导入语句

在vite.config.js中添加自定义Rollup插件，构建时替换错误的ES模块导入为CommonJS的require：

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

export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    include: ['react-virtualized']
  },
  build: {
    rollupOptions: {
      plugins: [
        {
          name: 'fix-react-virtualized-import',
          transform(code, id) {
            if (id.includes('react-virtualized/dist/es/WindowScroller/onScroll.js')) {
              return code.replace(
                "import { bpfrpt_proptype_WindowScroller } from '../WindowScroller';",
                "const { bpfrpt_proptype_WindowScroller } = require('../WindowScroller');"
              );
            }
            return code;
          }
        }
      ]
    }
  }
});

该插件会精准定位出错文件，修改导入语法以适配Vite的解析逻辑。

方案三：调整prop-types依赖版本

如果项目中prop-types版本过高，安装react-virtualized 9.21.2兼容的版本：

npm install prop-types@15.7.2 --save

react-virtualized 9.x依赖prop-types 15.x版本，高版本的prop-types导出结构变化可能引发该错误。

内容的提问来源于stack exchange，提问作者Rahul Ramshrey Chauhan