在React Hook中使用socks-proxy-agent遇net、dns、tls依赖缺失编译错误求助

尝试在React Hook中使用socks-proxy-agent，编译时提示找不到net、dns和tls包，相关依赖已安装但仍报错。

代码示例 #

import { useState, useEffect } from 'react';
import axios from 'axios';
import SocksProxyAgent from 'socks-proxy-agent';

const useSocks5ProxyRequest = () => {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);

      try {
        // 创建带SOCKS5代理的axios实例
        const agent = new SocksProxyAgent('socks5://127.0.1.1:9050');
        const axiosInstance = axios.create({ httpAgent: agent, httpsAgent: agent });

        // 发起请求
        const response = await axiosInstance.get('https://httpbin.org/ip');
        setData(response.data);
      } catch (error) {
        setError(error);
      }

      setLoading(false);
    };

    fetchData();
  }, []);

  return { data, error, loading };
};

export default useSocks5ProxyRequest;

错误信息 #

Module not found: Error: Can't resolve 'net' in '/usr/src/app/node_modules/socks/build/client'
Module not found: Error: Can't resolve 'tls' in '/usr/src/app/node_modules/socks-proxy-agent/dist'
Module not found: Error: Can't resolve 'dns' in '/usr/src/app/node_modules/socks-proxy-agent/dist'

核心原因 #

socks-proxy-agent是为Node.js环境设计的库，依赖Node.js内置的net、tls、dns模块，而浏览器环境没有这些内置模块，因此直接在React前端代码中使用会触发上述错误。

方案1：通过后端代理（浏览器环境唯一可行方案） #

不在前端直接处理SOCKS5代理，而是搭建一个Node.js后端服务，由后端完成代理请求，前端仅调用后端接口：

1. 后端服务示例（Express）

const express = require('express');
const axios = require('axios');
const SocksProxyAgent = require('socks-proxy-agent');
const app = express();

// 允许跨域（根据实际场景调整）
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  next();
});

app.get('/api/proxy-ip', async (req, res) => {
  try {
    const agent = new SocksProxyAgent('socks5://127.0.1.1:9050');
    const axiosInstance = axios.create({ httpAgent: agent, httpsAgent: agent });
    const response = await axiosInstance.get('https://httpbin.org/ip');
    res.json(response.data);
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

app.listen(3001, () => console.log('后端代理服务运行在3001端口'));

2. 修改前端Hook代码

import { useState, useEffect } from 'react';
import axios from 'axios';

const useSocks5ProxyRequest = () => {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        // 请求后端代理接口
        const response = await axios.get('http://localhost:3001/api/proxy-ip');
        setData(response.data);
      } catch (error) {
        setError(error);
      }
      setLoading(false);
    };
    fetchData();
  }, []);

  return { data, error, loading };
};

export default useSocks5ProxyRequest;

方案2：SSR/SSG项目（如Next.js）服务端使用 #

如果你的项目是服务端渲染架构，且仅在服务端执行的代码中使用socks-proxy-agent，可以通过webpack配置添加模块polyfill：

1. 安装polyfill插件

npm install node-polyfill-webpack-plugin

2. 配置webpack（以Next.js为例）
   在next.config.js中添加：

const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');

module.exports = {
  webpack: (config) => {
    config.plugins.push(new NodePolyfillPlugin());
    return config;
  },
};

3. 注意事项
   仅在getServerSideProps、getStaticProps等服务端专属函数中使用socks-proxy-agent，不要在客户端组件中调用相关逻辑。

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