Next.js应用调用setState时浏览器无响应崩溃问题求助

此前正常运行的Next.js应用，两周后启动开发环境时，出现调用setState修改状态时浏览器冻结且无任何错误提示的问题。该问题存在于所有项目中，并非单个组件的问题，我在项目主页使用极简测试组件进行测试：

"use client";
import React, { useState } from "react";

export default function TestComponent() {
  const [data, setData] = useState<string>("one");

  return (
    <div>
      {data}
      <button onClick={(e) => setData("two")}>change</button>
    </div>
  );
}

点击按钮触发状态更新时，浏览器依然冻结。

相关配置文件 #

.eslintrc.json #

{
  "extends": ["next", "prettier"]
}

next.config.js #

/** @type {import('next').NextConfig} */
const nextConfig = {
    reactStrictMode: true,
}

module.exports = nextConfig

tsconfig.json #

{
  "compilerOptions": {
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "paths": {
      "@/*": [
        "./*"
      ]
    },
    "plugins": [
      {
        "name": "next"
      }
    ]
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

package.json #

{
  "name": "projectname",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev --experimental-https -p 369",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.4.2",
    "@fortawesome/free-brands-svg-icons": "^6.4.2",
    "@fortawesome/free-solid-svg-icons": "^6.4.2",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "@reduxjs/toolkit": "^1.9.7",
    "@types/fbemitter": "^2.0.35",
    "echarts-for-react": "^3.0.2",
    "fbemitter": "^3.0.0",
    "firebase": "^10.7.0",
    "next": "^14.1.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@next/eslint-plugin-next": "^14.1.0",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "daisyui": "^4.4.2",
    "eslint": "^8.56.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-react": "^7.33.2",
    "postcss": "^8",
    "tailwindcss": "^3.3.0",
    "typescript": "^5"
  }
}

环境信息 #

• Node版本：v19.8.1
• NPM版本：9.5.1

已做排查 #

• 排除浏览器问题，已在多款浏览器测试；
• 删除过node_modules和npm缓存并重新安装；
• 删除过.next文件夹。

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