为何出现react-resizable模块未找到的错误？

1. 确认依赖安装在项目根目录 #

进入项目根目录（/Users/ChristopherDobbs/public-ui），打开package.json检查是否存在react-resizable和@types/react-resizable依赖项。如果没有，在根目录下重新安装：

# 使用npm
npm install react-resizable @types/react-resizable --save

# 或者使用yarn
yarn add react-resizable @types/react-resizable

注意不要在组件所在的子目录下执行安装命令，否则依赖会被安装到子目录的node_modules中，导致项目根目录无法识别。

2. 清除缓存并重新安装依赖 #

包管理器缓存可能导致依赖识别异常，执行以下命令重置依赖：

# npm操作
npm cache clean --force
rm -rf node_modules package-lock.json
npm install

# yarn操作
yarn cache clean
rm -rf node_modules yarn.lock
yarn install

3. 调整导入方式匹配包版本 #

不同版本的react-resizable导出结构有差异：

• 若使用v3.x版本，你当前的命名导入是正确的；
• 若为旧版本，尝试改用默认导入：

import ReactResizableBox from 'react-resizable';

4. 检查构建工具配置（自定义webpack时） #

如果项目修改过webpack配置，确保resolve.modules包含node_modules路径，让构建工具能找到依赖：

// webpack.config.js
module.exports = {
  resolve: {
    modules: ['node_modules'],
  },
};

使用Create React App的话，默认配置无需修改，可跳过此步骤。

5. 重启开发服务器 #

修改依赖或配置后，必须重启开发服务器才能加载新的依赖：

# 停止当前服务后重启
npm start
# 或
yarn start

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