在ReactJS中保护页面时遭遇stream模块解析失败错误

错误信息：./node_modules/jws/lib/verify-stream.js 5:13-30
模块未找到：错误：无法在'C:\Users\amank\Desktop\auth mern\client\node_modules\jws\lib'中解析'stream'
重大变更：webpack < 5版本默认会包含Node.js核心模块的polyfill。如今情况已不再如此，请确认是否需要该模块并配置对应的polyfill。

两种解决方案 #

方案1：添加stream的polyfill #

• 安装依赖：

npm install stream-browserify --save-dev

• 修改webpack配置（Create React App项目需用craco/react-app-rewired修改配置）：

module.exports = {
  resolve: {
    fallback: {
      "stream": require.resolve("stream-browserify")
    }
  }
};

方案2：禁用该模块的polyfill #

如果确认不需要stream模块，可直接配置webpack忽略它：

module.exports = {
  resolve: {
    fallback: {
      "stream": false
    }
  }
};

代码优化建议 #

你当前使用的jsonwebtoken是Node.js端的JWT库，在浏览器环境下会引入不必要的Node核心模块依赖（比如本次的stream）。建议替换为浏览器友好的jwt-decode库，仅专注于JWT解码，体积更小且无额外依赖：

1. 安装jwt-decode：

npm install jwt-decode

2. 修改后的Dashboard组件代码：

import React, { useEffect, useState } from "react";
import jwtDecode from "jwt-decode";
import { useNavigate } from "react-router-dom";

const Dashboard = () => {
  const navigate = useNavigate();
  const [user, setUser] = useState("");

  useEffect(() => {
    const token = localStorage.getItem("token");
    if (!token) {
      navigate("/login");
      return;
    }

    try {
      const decoded = jwtDecode(token);
      if (!decoded) throw new Error();
      setUser(decoded.name);
    } catch (err) {
      localStorage.removeItem("token");
      navigate("/login");
    }
  }, [navigate]); // 补充navigate到依赖数组，避免React钩子警告

  return (
    <div>
      <h1>Welcome: {user || "No user found"}</h1>
    </div>
  );
};

export default Dashboard;

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