Webpack编译报错UnhandledSchemeError：node:http读取未被插件处理

问题根源 #

你在React浏览器环境中导入了node-fetch——这个包专为Node.js环境设计，依赖Node.js内置模块（如node:http），Webpack编译浏览器端代码时无法处理这些Node专属模块，因此抛出错误。此外代码还存在未声明变量和严重安全问题。

解决方案步骤 #

1. 移除node-fetch依赖 #

• 删除代码中的导入语句：

  import fetch from 'node-fetch';
  

• 执行命令卸载包：

  npm uninstall node-fetch
  # yarn用户：yarn remove node-fetch
  # pnpm用户：pnpm remove node-fetch
  

浏览器原生支持fetch API，无需额外导入。

2. 修复未声明的formData变量 #

添加useState管理表单数据：

import React, { useState } from 'react';

const RegistrationForm = () => {
  // 声明表单状态
  const [formData, setFormData] = useState({
    authMethod: 'UserIDPassword',
    whitelistedDomains: '',
    email: '',
    username: ''
  });

  // 表单输入变更处理函数
  const handleInputChange = (e) => {
    setFormData(prev => ({
      ...prev,
      [e.target.name]: e.target.value
    }));
  };

  // 原有handleSubmit和sendInvitation函数...
};

3. 修复严重安全问题 #

绝对不能在前端代码中暴露client_secret——前端代码会被所有用户查看，直接导致Auth0账户面临恶意利用风险。正确流程：

• 在你的后端服务器中实现Client Credentials Grant，获取访问令牌
• 前端调用自身后端API，由后端中转请求到Auth0 Management API

修正后的完整代码示例 #

import React, { useState } from 'react';

const RegistrationForm = () => {
  const [formData, setFormData] = useState({
    authMethod: 'UserIDPassword',
    whitelistedDomains: '',
    email: '',
    username: ''
  });

  const handleInputChange = (e) => {
    setFormData(prev => ({
      ...prev,
      [e.target.name]: e.target.value
    }));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();

    if (formData.authMethod === 'UserIDPassword') {
      try {
        // 调用自身后端API，而非直接请求Auth0
        const invitationResponse = await sendInvitation(formData.whitelistedDomains);
        console.log('Invitation sent:', invitationResponse);
      } catch (error) {
        console.error('Error sending invitation:', error);
      }
    } else {
      console.log('Handle form submission for other authentication methods');
    }
  };

  // 替换为调用自身后端API的逻辑
  const sendInvitation = async (domains) => {
    const domainArray = domains.split(',').map((domain) => domain.trim());
    try {
      const response = await fetch('/api/send-auth0-invitation', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          email: formData.email,
          username: formData.username,
          domains: domainArray
        })
      });

      if (!response.ok) throw new Error('Failed to send invitation');
      return await response.json();
    } catch (error) {
      console.error('Error sending invitation:', error);
      throw error;
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <select name="authMethod" value={formData.authMethod} onChange={handleInputChange}>
        <option value="UserIDPassword">UserID & Password</option>
        <option value="Other">Other Method</option>
      </select>
      <input
        type="email"
        name="email"
        value={formData.email}
        onChange={handleInputChange}
        placeholder="Email"
        required
      />
      <input
        type="text"
        name="username"
        value={formData.username}
        onChange={handleInputChange}
        placeholder="Username"
        required
      />
      <input
        type="text"
        name="whitelistedDomains"
        value={formData.whitelistedDomains}
        onChange={handleInputChange}
        placeholder="Whitelisted domains (comma-separated)"
      />
      <button type="submit">Send Invitation</button>
    </form>
  );
};

export default RegistrationForm;

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