如何修复Popper.js与Webpack 5的default非构造函数错误

在项目中使用react-recurrence组件时，鼠标悬停在日期上触发如下错误：
popper_js__WEBPACK_IMPORTED_MODULE_5__.default is not a constructor

此前遇到过类似问题，疑似旧版Material UI的Tooltip组件导致，想了解是否可忽略旧版Material UI，或有其他解决办法。

错误截图

webpack.config.js 配置

const { merge } = require('webpack-merge');
const Dotenv = require('dotenv-webpack');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const FilterWarningsPlugin = require('webpack-filter-warnings-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const path = require('path');
const singleSpaDefaults = require('webpack-config-single-spa-react-ts');

module.exports = (webpackConfigEnv, argv) => {
  const defaultConfig = singleSpaDefaults({
    orgName: 'app',
    projectName: 'comm',
    webpackConfigEnv,
    argv,
  });

  return merge(defaultConfig, {
    externals: ['@app/styleguide'],
    resolve: {
      extensions: ['.ts', '.d.ts', '.tsx', '.js', '.jsx'],
      preferRelative: true,
      fallback: {
        fs: false,
        tls: false,
        net: false,
        path: false,
        zlib: false,
        http: false,
        https: false,
        stream: false,
        crypto: false,
        'crypto-browserify': require.resolve('crypto-browserify'),
      },
      alias: {
        helpers: path.resolve(__dirname, 'src/helpers/'),
        stores: path.resolve(__dirname, 'src/stores/'),
        hooks: path.resolve(__dirname, 'src/hooks/'),
        components: path.resolve(__dirname, 'src/components/'),
        layouts: path.resolve(__dirname, 'src/layouts/'),
      },
      plugins: [new TsconfigPathsPlugin({ configFile: './tsconfig.json' })],
    },
    devServer: {
      port: 8500,
    },
    plugins: [
      new Dotenv({
        path: './.env.development',
      }),
      new FilterWarningsPlugin({
        exclude:
          /There are multiple modules with names that only differ in casing/,
      }),
      new CleanWebpackPlugin(),
    ],
    output: {
      path: path.resolve(__dirname, 'build'),
    },
  });
};

• 排查Popper.js版本冲突
  这个错误本质是依赖版本不兼容：旧版Material UI（v4及以下）依赖popper.js（v1.x），而react-recurrence可能使用了新版@popperjs/core（v2+），两者导出机制不同，导致找不到构造器。
  先执行命令查看项目Popper依赖树：

  # npm用户
  npm ls popper.js @popperjs/core
  # yarn用户
  yarn list popper.js @popperjs/core
  

  找到冲突后，强制统一版本：

  • npm项目在package.json中添加overrides：

    "overrides": {
      "popper.js": "^1.16.1", // 匹配旧版MUI依赖版本
      "@popperjs/core": "^2.11.8" // 或根据react-recurrence要求调整
    }
    

  • yarn项目添加resolutions：

    "resolutions": {
      "popper.js": "^1.16.1",
      "@popperjs/core": "^2.11.8"
    }
    

  执行npm install或yarn install重新安装依赖。

• 替换/禁用Tooltip组件

  1. 若无需旧版MUI Tooltip，可改用独立组件（如react-tooltip）避免依赖冲突：

     npm install react-tooltip
     

     替换项目中旧Tooltip的用法即可。
  2. 查看react-recurrence文档，若有禁用内置Tooltip的props（如disableTooltip），直接关闭组件自带提示，改用自定义逻辑。

• Webpack Alias强制指定Popper版本
  在webpack.config.js的resolve.alias中添加配置，强制所有依赖使用同一Popper版本：

  resolve: {
    // ...其他配置
    alias: {
      // ...已有的alias
      'popper.js': path.resolve(__dirname, 'node_modules/popper.js'), // 指向旧版适配MUI
      // 若react-recurrence需要新版则改为：
      // '@popperjs/core': path.resolve(__dirname, 'node_modules/@popperjs/core')
    }
  }
  

  需根据实际兼容情况选择版本，测试后生效。

• 升级Material UI（推荐）
  若项目允许，将旧版Material UI升级到v5+，MUI v5已改用@popperjs/core，和现代组件依赖一致，从根源解决版本冲突。升级前需做好API变更测试，避免兼容问题。

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