React项目本地运行时Mac端Chrome卡顿并返回错误码5

问题描述 #

我是React新手，最初我的应用能正常在浏览器打开，但现在执行npm start后，Mac系统上的Chrome浏览器出现卡顿并返回错误码5。我已经清理了浏览器缓存和扩展程序，但问题仍未解决，而且除VS Code外其他应用都运行正常，终端也没有任何错误提示。

相关代码 #

精简后的React代码 #

import React from "react"
import ReactDOM from "react-dom/client"

function App() {
  return (
    <div>
      <Header />
      <Menu />
      <Footer />
    </div>
  )
}

function Header() {
  return <h1>Fast React Pizza Co.</h1>
}

function Menu() {
  return (
    <div>
      <h2>Our menu</h2>
      <Pizza />
      <Pizza />
      <Pizza />
      <Pizza />
    </div>
  )
}

function Footer() {
  return (
    <Footer>{new Date().toLocaleTimeString()} "We're currently open!"</Footer>
  )
}

function Pizza() {
  return (
    <div>
      <img src="pizzas/spinaci.jpg" alt="Pizza Spinaci" />
      <h2>Pizza Spinaci</h2>
      <p>Tomato, mozarella, spinach, and ricotta cheese</p>
    </div>
  )
}

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(<App />)

package.json内容 #

{
  "name": "pizza-menu",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

终端输出（翻译后） #

编译成功！
现在你可以在浏览器中查看pizza-menu应用。
本地地址:            http://localhost:3000
局域网地址:  http://10.72.172.175:3000

注意：开发构建版本未经过优化。
如需创建生产构建版本，请使用 npm run build 命令。

webpack 编译成功

问题根源 #

代码中的Footer组件存在无限递归渲染问题：组件内部返回了<Footer>（自身组件），这会让React不断创建Footer组件实例，导致浏览器内存耗尽，最终出现卡顿和错误码5。

解决方案 #

1. 修复Footer组件的递归问题 #

将Footer组件内部的<Footer>标签改为普通HTML标签（比如小写的<footer>或<div>），示例：

function Footer() {
  return (
    <footer>{new Date().toLocaleTimeString()} We're currently open!</footer>
  )
}

2. 其他排查步骤（若修复后仍有问题） #

• 修改启动端口：执行PORT=3001 npm start，避免端口冲突
• 完全重启React开发服务器和Chrome浏览器
• 尝试用Safari等其他浏览器打开，确认是否为Chrome专属问题
• 清理依赖并重新安装：执行rm -rf node_modules && npm install

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