向已发布应用的node_modules加依赖包？React组件引入报错求助

1. 如何向已发布应用的node_modules目录中添加依赖包？ #

首先得提一句：非常不建议直接手动修改node_modules目录，这种修改是本地临时的，一旦你重新执行npm install或yarn install，所有手动改动都会被覆盖，而且其他协作开发者也没法同步你的修改。

正确的做法分两种场景：

• 如果这是你自己维护的应用：直接修改项目根目录的package.json，把需要的依赖加到dependencies（生产环境用）或devDependencies（开发环境用）里，然后运行npm install或yarn add <包名>（开发依赖加-D参数）。这样依赖会被正确记录在配置文件中，任何环境安装都会自动拉取这些包。
• 如果这是第三方发布的成品应用（比如你下载的可运行项目），但确实需要临时添加依赖：直接在项目根目录执行npm install <包名>或yarn add <包名>，包管理器会自动把依赖安装到node_modules，同时更新对应的lock文件。但要注意，这种修改没法持久化，除非你把整个node_modules目录一起备份，或者手动更新package.json。
• 要是你想给某个已安装的第三方包补充它的依赖，绝对不能直接改它的node_modules——这说明该包可能本身存在依赖缺失，最好的方式是给包作者提issue反馈，或者试试npm dedupe命令让包管理器自动整理依赖树。

2. React v15.4.2中使用Voyager组件出现元素类型无效的错误 #

这个错误我太熟了！本质就是你要渲染的组件是undefined，大概率是导出/导入环节出了问题，结合React v15.4.2的特性，给你一步步排查的思路：

先查导出和导入是否匹配 #

• 确认Voyager组件的导出方式：如果组件是用export default导出的，导入时就不能加花括号；如果是export const XXX这种命名导出，导入必须加花括号。举个例子：

  // 组件文件里是默认导出
  export default VoyagerComponent;
  // 那你要这么导入
  import VoyagerComponent from './path/to/VoyagerComponent';
  
  // 如果是命名导出
  export const VoyagerComponent = () => {...};
  // 导入就得加花括号
  import { VoyagerComponent } from './path/to/VoyagerComponent';
  

• 检查导入路径：别小看拼写错误！尤其是在Linux/macOS环境下，路径大小写是敏感的，比如Voyager.jsx和voyager.jsx是两个不同的文件。另外React v15.4.2的webpack配置如果没设置自动补全后缀，你可能需要在导入时加上.jsx或.js后缀。

再查兼容性和组件使用 #

• 确认Voyager版本是否兼容React v15.4.2：有些新的Voyager版本可能只支持React v16及以上，要是版本不兼容，组件可能没法正确导出，自然就会出现undefined的情况。你可以查看Voyager的版本说明，要么降级Voyager到兼容v15的版本，要么考虑升级React（不过升级React可能需要调整其他依赖，得谨慎）。
• 检查DataSelectorBase的render方法：错误提示明确提到要检查这个组件的render方法，你得看看里面是不是把Voyager组件的变量名写错了，或者渲染了一个没导入的变量。比如：

  // 错误示例：导入时变量名写错了
  import { WrongVoyagerName } from 'voyager-package';
  
  class DataSelectorBase extends React.Component {
    render() {
      return <WrongVoyagerName />; // 这里用了错误的变量，导致渲染undefined
    }
  }
  

快速排查小技巧 #

你可以在导入组件后立刻打印出来，看看是不是undefined：

import VoyagerComponent from 'voyager-package';
console.log('Voyager组件:', VoyagerComponent);

如果打印出来是undefined，那肯定是导入环节的问题；如果是正常的函数/类，那再去查render方法里的使用。

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