如何在package.json中添加本地依赖并解决React启动报错问题

方法一：Webpack别名配置（无需封装npm包） #

如果ports.js只是单个独立的ES6模块，推荐用别名方式简化导入，避免本地依赖的复杂配置：

• 若使用Create React App（CRA），先安装craco（CRA默认不允许直接修改Webpack配置）：

  npm install @craco/craco --save-dev
  

• 在每个React应用根目录创建craco.config.js，添加别名映射：

  const path = require('path');
  
  module.exports = {
    webpack: {
      alias: {
        '@server-ports': path.resolve(__dirname, '../../ports/ports.js')
      }
    }
  };
  

• 修改React应用package.json的脚本命令，替换为craco执行：

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  }
  

• 在组件中直接导入：

  import ports from '@server-ports';
  // 按需导入示例
  import { apiPort, socketPort } from '@server-ports';
  

方法二：封装成本地npm包（适合多项目复用） #

如果需要将ports作为独立模块管理，按以下步骤配置：

1. 在ports目录下创建package.json，明确模块属性：

   {
     "name": "server-ports",
     "version": "1.0.0",
     "type": "module",
     "main": "./ports.js",
     "exports": "./ports.js"
   }
   

   注意：不要在此package.json中添加无关依赖（如react-dev-utils），避免与React应用的依赖冲突。

2. 在两个React应用的package.json中添加本地依赖：

   "dependencies": {
     "server-ports": "file:../../ports"
   }
   

3. 重新安装依赖：

   npm install
   

4. 在组件中导入：

   import ports from 'server-ports';
   // 按需导入示例
   import { apiPort, socketPort } from 'server-ports';
   

错误排查方案 #

你遇到的Cannot find module 'react-dev-utils/getPublicUrlOrPath'错误，通常由以下原因导致，可按顺序排查：

• 检查ports目录下是否存在多余的package.json（比如误复制的父目录配置），若有则直接删除。
• 删除React应用的node_modules、package-lock.json（或yarn.lock），重新执行npm install清理依赖缓存。
• 单独安装缺失的依赖修复：

  npm install react-dev-utils --save-dev
  

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