已安装ipfs-http-client仍报错：无法解析模块求助

问题描述 #

向IPFS传输文件时，编译持续报错：Module not found: Can't resolve 'ipfs-http-client' in '/home/ubuntu/chatapp/src/components'。已执行npm install --save ipfs-http-client安装v60.0.0版本，但错误依旧。

解决方案 #

1. 确认依赖安装路径 #

• 检查package.json是否位于项目根目录/home/ubuntu/chatapp/，确保安装命令是在此目录下执行的，而非子目录。
• 若曾在子目录误执行安装，删除子目录下的node_modules和package-lock.json，回到根目录重新执行：

  npm install --save ipfs-http-client
  

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

缓存异常可能导致模块解析失败，执行以下步骤：

# 清除npm缓存
npm cache clean --force
# 删除本地依赖文件
rm -rf node_modules package-lock.json
# 重新安装所有依赖
npm install

3. 适配v60.x版本的导入方式 #

ipfs-http-client v60.x版本的API导入方式与旧版本不同，替换原require写法为ES模块导入：

// 替换原有的require代码
import { create } from 'ipfs-http-client';
const ipfs = create({ host: 'ipfs.infura.io', port: '5001', protocol: 'https' });

4. 检查Webpack模块解析配置（自定义项目适用） #

若项目自定义了webpack.config.js，确保resolve.modules包含node_modules目录：

resolve: {
  modules: ['node_modules', path.resolve(__dirname, 'src')]
}

代码优化建议（避免后续报错） #

你的代码中还有两个潜在问题，提前修复：

1. 浏览器环境的Buffer缺失：
   Create React App默认不全局提供Buffer，需安装依赖并导入：

   npm install buffer
   

   在代码顶部添加：

   import { Buffer } from 'buffer';
   

2. 异步写法冲突：
   await与回调函数混用会导致逻辑异常，改用Promise风格的try/catch：

   onSubmit = async (event) => {
     event.preventDefault();
     console.log("submitting the form...");
     try {
       const result = await ipfs.add(this.state.buffer);
       console.log('ipfs result', result);
       // 此处添加后续业务逻辑
     } catch (error) {
       console.error(error);
     }
   }
   

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