在React代码中集成country-region-selector时遭遇依赖解析错误

问题背景 #

在Ubuntu环境中，项目使用React 18.2.0 + Vite 2.9.15，尝试引入react-country-region-selector实现国家选择器时，出现「Could not resolve "react"」错误。该包的peer依赖要求react@^15.0.0 || ^16.0.0，但项目已安装React 18及ReactDOM 18。

错误日志 #

[ERROR] Could not resolve "react"

../../node_modules/react-country-region-selector/dist/rcrs.es.js:1:48:
  1 │ import React, { Component, PureComponent } from 'react';
    ╵                                                 ~~~~~~~

You can mark the path "react" as external to exclude it from the bundle, which will remove this
error.

11:29:46 AM [vite] error while updating dependencies:
Error: Build failed with 1 error:
../../node_modules/react-country-region-selector/dist/rcrs.es.js:1:48: ERROR: Could not resolve "react"
    at failureErrorWithLog (/home/shamma/my-experiment/client/node_modules/esbuild/lib/main.js:1605:15)
    at /home/shamma/my-experiment/client/node_modules/esbuild/lib/main.js:1251:28
    at runOnEndCallbacks (/home/shamma/my-experiment/client/node_modules/esbuild/lib/main.js:1034:63)
    at buildResponseToResult (/home/shamma/my-experiment/client/node_modules/esbuild/lib/main.js:1249:7)
    at /home/shamma/my-experiment/client/node_modules/esbuild/lib/main.js:1358:14
    at /home/shamma/my-experiment/client/node_modules/esbuild/lib/main.js:666:9
    at handleIncomingPacket (/home/shamma/my-experiment/client/node_modules/esbuild/lib/main.js:763:9)
    at Socket.readFromStdout (/home/shamma/my-experiment/client/node_modules/esbuild/lib/main.js:632:7)
    at Socket.emit (node:events:513:28)
    at addChunk (node:internal/streams/readable:315:12)
Vite Error, /node_modules/.vite/deps/react-country-region-selector.js?v=8daa6a38 optimized info should be defined

引入代码 #

import { CountryDropdown, RegionDropdown, CountryRegionData } from 'react-country-region-selector';

npm操作记录 #

(base) shamma@shamma-ThinkPad-13-2nd-Gen:~$ sudo npm-install-peers
This package doesn't seem to have any peerDependencies
(base) shamma@shamma-ThinkPad-13-2nd-Gen:~$ 
(base) shamma@shamma-ThinkPad-13-2nd-Gen:~$ sudo npm install --save prop-types
npm WARN react-country-region-selector@1.4.7 requires a peer of react@^15.0.0 || ^16.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-country-region-selector@1.4.7 requires a peer of react-dom@^15.0.0 || ^16.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN shamma No description
npm WARN shamma No repository field.
npm WARN shamma No license field.

项目package.json配置 #

{
  "dependencies": {
    "@empirica/core": "1.0.0-rc.21",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "@types/react": "18.0.14",
    "@types/react-dom": "18.0.5",
    "@vitejs/plugin-react-refresh": "1.3.6",
    "autoprefixer": "10.4.7",
    "path": "0.12.7",
    "vite": "2.9.15",
    "vite-plugin-restart": "0.1.1",
    "vite-plugin-windicss": "1.8.4"
  },
  "name": "my-experiment-empirica-server",
  "private": true,
  "scripts": {
    "build": "vite build",
    "dev": "NODE_ENV=\"production\" vite",
    "serve": "vite preview"
  },
  "version": "0.0.0",
  "volta": {
    "node": "16.17.0",
    "npm": "8.15.0"
  }
}

解决方案 #

1. 用--legacy-peer-deps安装依赖 #

react-country-region-selector@1.4.7版本较旧，peer依赖指定React 15/16，但React 18向下兼容该组件。npm 7+默认严格检查peer依赖，需用以下命令忽略版本不匹配：

npm install react-country-region-selector --legacy-peer-deps

若已安装该包，可删除依赖后重新安装：

rm -rf node_modules package-lock.json
npm install --legacy-peer-deps

2. 配置Vite将React标记为外部依赖 #

若上述方法无效，在vite.config.js中添加Rollup外部依赖配置，告诉Vite React是全局依赖无需打包：

import { defineConfig } from 'vite'
import reactRefresh from '@vitejs/plugin-react-refresh'

export default defineConfig({
  plugins: [reactRefresh()],
  build: {
    rollupOptions: {
      external: ['react', 'react-dom']
    }
  }
})

配置完成后重启Vite服务。

3. 验证依赖安装状态 #

执行以下命令确认React和react-country-region-selector已正确安装：

npm list react react-dom react-country-region-selector

确保输出中三个包都存在且版本正确。

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