create-react-app React项目中PouchDB.find报错is not a function求助

我之前在create-react-app项目里也碰到过一模一样的情况，结合这个脚手架的Webpack特性，给你几个实用的解决方向：

• 改用ES模块方式导入插件
  create-react-app默认对ES模块的支持更友好，用require可能会出现模块解析的兼容性问题，换成import试试：

  import PouchDB from 'pouchdb';
  import pouchdbFind from 'pouchdb-find';
  
  PouchDB.plugin(pouchdbFind);
  

• 移除重复的PouchDB包
  你的package.json里同时存在pouchdb和pouchdb-browser，这两个是针对不同环境的构建版本，很可能导致插件挂载到了一个PouchDB实例，而你代码里实际使用的是另一个。建议只保留一个：

  • 如果是纯浏览器环境，删除pouchdb依赖，只保留pouchdb-browser，导入代码改成：

    import PouchDB from 'pouchdb-browser';
    import pouchdbFind from 'pouchdb-find';
    
    PouchDB.plugin(pouchdbFind);
    

  • 反之如果需要全量功能，删除pouchdb-browser，保留pouchdb即可。

• 清除缓存并重新构建
  create-react-app的缓存机制有时候会搞乱模块加载，试试这些步骤：

  1. 停止开发服务器
  2. 删除node_modules和package-lock.json：

     rm -rf node_modules package-lock.json
     

  3. 重新安装依赖：npm install
  4. 重启开发服务器或者重新执行构建：npm run build

• 验证插件挂载状态
  可以在代码里加一行调试代码，确认插件是否真的挂载成功：

  console.log(PouchDB.prototype.find);
  

  如果控制台输出的是一个函数，说明插件已经挂载成功，可能是你调用find()的方式有问题；如果输出undefined，再回头检查前面的步骤。

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