开发中发现 react-resizable库 跟react-draggable 库发生了冲突
由于本地使用的代码库存在兼容问题，所以在此记录一下
直接安装npm install react-resizable --save
发现运行项目会直接报引用错误
ERROR Failed to compile with 1 errors 17:25:56error in ./node_modules/react-draggable/build/cjs/Draggable.jsModule 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， 手动替换一下即可。