集成 react-resizable

开发中发现  react-resizable库 跟react-draggable 库发生了冲突

由于本地使用的代码库存在兼容问题，所以在此记录一下

直接安装npm install react-resizable --save

发现运行项目会直接报引用错误

ERROR  Failed to compile with 1 errors                                                                                                                                                 17:25:56
 error  in ./node_modules/react-draggable/build/cjs/Draggable.js
 
Module parse failed: Unexpected token (210:22)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   // the underlying DOM node ourselves. See the README for more information.
|   findDOMNode() /*: ?HTMLElement*/{
>     return this.props?.nodeRef?.current ?? _reactDom.default.findDOMNode(this);
|   }
|   render() /*: ReactElement<any>*/{
 
 @ ./node_modules/react-draggable/build/cjs/cjs.js 6:4-26
 @ ./node_modules/react-resizable/build/Resizable.js
 @ ./node_modules/react-resizable/index.js

排查后发现是两个依赖的兼容问题

问题定位在安装的 react-resizable版本兼容上 因为当前公司项目使用的是Antd3.x 偏老的项目

兼容版本

依赖库	推荐版本	说明
antd 3.x	(如 3.26.20)	Ant Design 3.x主版本
react-resizable 1.x	(如 1.11.1)	支持 React 16+，与 Antd 3.x 兼容
react-draggable 4.x	(如 4.4.5)	react-resizable@1.x 的 peerDependency

 

问题解决 | 安装命令

npm install antd@3.x react-resizable@1.11.1 react-draggable@4.4.5

最好是去 node_module/react-resizable的资源里面去确认一下react-draggable的资源版本，大概率还是 @4.5.0， 手动替换一下即可。