React Vite应用运行报错：缺少HTML加载器及依赖无法解析求助

错误现象 #

运行React Vite应用时触发以下打包错误，同时浏览器提示：

GET http://localhost:5173/ net::ERR_CONNECTION_REFUSED

已安装所有相关依赖，但问题仍未解决。

具体错误详情 #

1. 未为".html"文件配置加载器

../server/node_modules/@mapbox/node-pre-gyp/lib/node-pre-gyp.js:86:21:
  86 │       return require('./' + command)(self, argvx, callback);
     ╵                      ~~~~~~~~~~~~~~
错误提示：未为".html"文件配置加载器：../server/node_modules/@mapbox/node-pre-gyp/lib/util/nw-pre-gyp/index.html

2. 无法解析"mock-aws-s3"

../server/node_modules/@mapbox/node-pre-gyp/lib/util/s3_setup.js:43:28:
  43 │     const AWSMock = require('mock-aws-s3');
     ╵                             ~~~~~~~~~~~~~

3. 无法解析"aws-sdk"

../server/node_modules/@mapbox/node-pre-gyp/lib/util/s3_setup.js:76:22:
  76 │   const AWS = require('aws-sdk');
     ╵                       ~~~~~~~~~

4. 无法解析"nock"

../server/node_modules/@mapbox/node-pre-gyp/lib/util/s3_setup.js:112:23:
  112 │   const nock = require('nock');
      ╵                        ~~~~~~

解决方案 #

1. 排除Node.js端依赖的打包解析 #

@mapbox/node-pre-gyp、mock-aws-s3、aws-sdk、nock均为Node.js环境下的工具/测试依赖，前端Vite打包无需处理这些模块。通过配置将它们标记为外部依赖，跳过打包解析：

修改项目根目录下的vite.config.js（或.ts）：

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

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      external: [
        '@mapbox/node-pre-gyp',
        'mock-aws-s3',
        'aws-sdk',
        'nock'
      ]
    }
  },
  server: {
    port: 5173, // 确认端口未被占用
    open: true
  }
});

2. 解决HTML加载器错误 #

通过上述external配置排除整个@mapbox/node-pre-gyp包后，即可避免其内部动态加载HTML文件导致的加载器错误。

3. 修复连接拒绝问题 #

打包错误会导致Vite开发服务无法正常启动，完成配置修改后重新执行npm run dev。若仍出现连接拒绝：

• 检查端口5173是否被占用：Mac/Linux用lsof -i :5173，Windows用netstat -ano | findstr :5173，结束占用进程后重试。
• 若端口被占用，可在vite.config.js的server.port中修改为其他未被占用的端口（如5174）。

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