React项目已安装ipfs-http-client仍报模块无法解析错误求助

报错信息 #

• 命令行输出：Module not found: Can't resolve 'ipfs-http-client' in 'D:\Pro\src\components'
• 构建阶段网页端输出：

Failed to compile
./src/components/App.js
Module not found: Can't resolve 'ipfs-http-client' in 'D:\Pro\src\components'

错误在项目构建阶段触发，无法手动关闭。

场景说明 #

基于Node.js+React技术栈开发网站，需要实现文件上传至IPFS的功能，选用ipfs-http-client作为依赖包。已按照官方文档执行npm install --save ipfs-http-client完成安装，项目依赖列表中可见该模块，但通过require方式引入时持续触发上述报错。

问题复现代码 #

import React, { Component } from 'react'; 
import logo from '../logo.png'; 
import './App.css'; 

const ipfsClient = require('ipfs-http-client'); 
const projectId = '*****'; 
const projectSecret = '***'; 
const auth =
    'Basic ' + Buffer.from(projectId + ':' + projectSecret).toString('base64'); 
const ipfs = ipfsClient.create({
    host: 'ipfs.infura.io',
    port: 5001,
    protocol: 'https',
    headers: {
        authorization: auth,
    }, 
}); 
class App extends Component {   
    constructor(props) {    
      super(props);
      this.state={
        buffer: null
      };   
    }   
captureFile=(event) => {
    event.preventDefault()
    const file = event.target.files[0]
    const reader = new window.FileReader() 
    reader.readAsArrayBuffer(file)
    reader.onloadend=() => {
      this.setState({buffer: Buffer(reader.result) }) 
    }
    console.log(event.target.files)   
}   
onSubmit = (event) => {
    event.preventDefault()
    console.log("Submitting the form...")
       ipfs.add(this.state.buffer, (error,result) => {
         console.log('Ipfs result', result)
         if(error){
           console.error(error)
           return 
         }
       })   
}

问题原因及修复方案 #

• 依赖安装路径错误：报错提示模块查找路径为D:\Pro\src\components，说明执行安装命令时工作目录不对，没有在存放package.json的项目根目录D:\Pro下执行npm install，导致依赖被安装到了子目录，构建时无法从标准依赖查找路径定位到模块。
  修复操作：删除项目内所有子目录下的node_modules文件夹、package-lock.json文件，回到项目根目录D:\Pro，重新执行npm install ipfs-http-client --save，安装完成后确认根目录下package.json的dependencies字段存在ipfs-http-client的版本记录。
• 模块引入方式不兼容：v50及以上版本的ipfs-http-client为纯ES Module包，不支持CommonJS规范的require()默认引入，同时React项目中混用import和require两种模块引入方式也容易触发解析错误。
  修复操作：将原有const ipfsClient = require('ipfs-http-client')替换为ES Module引入写法：

  import { create } from 'ipfs-http-client'
  

  同步修改IPFS实例初始化代码：

  const ipfs = create({
      host: 'ipfs.infura.io',
      port: 5001,
      protocol: 'https',
      headers: {
          authorization: auth,
      }, 
  })
  

• API调用写法过时：新版本ipfs-http-client的add方法返回Promise对象，不再支持旧版的回调函数传参，原有回调写法会在功能触发时抛出运行错误。
  修复操作：将onSubmit方法修改为异步写法：

  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)
      }
  }
  

• 构建缓存问题：以上操作完成后如果仍报模块找不到的错误，在项目根目录执行npm install补全全量依赖，终止本地开发服务后重新启动即可。

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