react-media-previewer与React 18版本冲突引发Invalid Hook call问题求助

一、解决React版本冲突导致的Invalid Hook Call错误 #

方案1：强制统一React版本（npm环境） #

1. 安装版本锁定工具：

   npm install -D npm-force-resolutions
   

2. 在项目package.json中添加配置：

   "scripts": {
     "preinstall": "npx npm-force-resolutions"
   },
   "resolutions": {
     "react": "18.2.0",
     "react-dom": "18.2.0"
   }
   

3. 清理现有依赖后重新安装：

   rm -rf node_modules package-lock.json
   npm install
   

此操作会强制让react-media-previewer复用项目的React 18实例，消除双版本冲突。

方案2：使用yarn原生版本锁定 #

直接在项目package.json中添加：

"resolutions": {
  "react": "18.2.0",
  "react-dom": "18.2.0"
}

执行yarn install即可完成版本统一。

二、解决npm link时的Rollup入口错误 #

若需通过npm link调试依赖，按以下步骤修复：

1. 克隆react-media-previewer1.3.7版本的源码到本地
2. 进入源码目录，检查是否存在rollup.config.js：
   • 若不存在，手动创建基础配置（替换实际入口路径）：

     import babel from '@rollup/plugin-babel';
     import resolve from '@rollup/plugin-node-resolve';
     import commonjs from '@rollup/plugin-commonjs';
     
     export default {
       input: 'src/index.js',
       output: [
         { file: 'dist/index.cjs.js', format: 'cjs' },
         { file: 'dist/index.esm.js', format: 'esm' }
       ],
       external: ['react', 'react-dom'],
       plugins: [
         resolve(),
         commonjs(),
         babel({ babelHelpers: 'bundled', presets: ['@babel/preset-react'] })
       ]
     };
     

3. 安装源码所需的开发依赖：

   npm install -D rollup @rollup/plugin-babel @rollup/plugin-node-resolve @rollup/plugin-commonjs @babel/preset-react
   

4. 先在源码目录执行npm link，再到项目目录执行npm link react-media-previewer
5. 确认源码package.json的main/module字段指向打包后的输出文件

三、临时应急方案：修改依赖源码 #

若上述方法繁琐，可直接修改node_modules/react-media-previewer：

• 调整依赖的React导入逻辑，确保复用项目的React实例
• 适配React 18的API（替换过时调用）

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