React项目构建时出现resize-observer-polyfill包入口解析失败错误求助

常见解决方案： #

• 重新安装依赖
  先确认包是否正常安装，执行命令：

  npm install resize-observer-polyfill
  

  若已安装，尝试卸载后重装：

  npm uninstall resize-observer-polyfill && npm install resize-observer-polyfill
  

  使用Yarn的话对应替换为yarn add和yarn remove && yarn add。

• 升级包版本
  部分旧版本的resize-observer-polyfill存在入口配置问题，升级到最新稳定版：

  npm install resize-observer-polyfill@latest
  

• 调整构建工具配置

  • 若使用Vite，在vite.config.js中添加依赖优化配置：

    import { defineConfig } from 'vite'
    import react from '@vitejs/plugin-react'
    
    export default defineConfig({
      plugins: [react()],
      optimizeDeps: {
        include: ['resize-observer-polyfill']
      }
    })
    

  • 若使用Webpack，在webpack.config.js的resolve配置中添加别名：

    module.exports = {
      resolve: {
        alias: {
          'resize-observer-polyfill': require.resolve('resize-observer-polyfill')
        }
      }
    }
    

• 清除缓存
  清理包管理工具和构建缓存：

  • 删除项目根目录下的node_modules、package-lock.json（或yarn.lock）
  • 执行缓存清理命令：

    # npm
    npm cache clean --force
    # Yarn
    yarn cache clean
    

  • 重新安装依赖并重新构建项目

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