React新安装模块未在package.json依赖列表显示时如何使用

这类问题10个里有9个是执行npm安装命令时终端所在路径不是你的React项目根目录，按以下步骤操作即可：

• 第一步：定位正确的项目目录
  关闭当前终端，找到你用create-react-app创建的项目文件夹，进入根目录（就是存放package.json、src文件夹、public文件夹的那一级目录），在这个路径下重新打开终端。
  验证路径是否正确：在终端执行dir（Windows系统）或ls（Mac/Linux系统），返回结果里能看到package.json文件才是正确位置。
  如果你之前在其他路径（比如电脑用户根目录、桌面、其他项目文件夹）执行了安装命令，包会被装到对应路径的node_modules里，当前项目自然读不到。
• 第二步：重新执行安装命令
  在确认正确的项目根目录下，重新运行安装命令：

  npm i -S @react-google-maps/api
  

• 第三步：验证安装结果
  安装完成后核对两个位置：
  1. 打开项目根目录下的package.json文件，查看dependencies字段，能看到"@react-google-maps/api": 对应版本号的条目
  2. 打开项目下的node_modules/@react-google-maps/路径，能看到api文件夹
     两个条件都满足就说明安装成功，不需要额外前置配置，直接在组件中导入即可使用，示例导入代码：

  import { GoogleMap, useJsApiLoader } from '@react-google-maps/api';
  

• 如果编辑器（比如VSCode）文件树没显示新安装的包，手动点一下文件资源管理器的刷新按钮即可，属于编辑器缓存不自动更新的问题
• 如果之前在错误路径安装过包，去对应路径下删掉多余的node_modules、package.json、package-lock.json文件即可，避免占用磁盘空间
• 不要加sudo执行npm安装命令，容易出现权限异常导致文件无法写入正确目录，如果之前用过sudo执行npm命令，先修复用户目录下.npm文件夹的权限后再重新安装

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