Next.js自定义代码无法执行仅渲染标记的问题求助

我正在开发一个网站，目前仅实现了通过下拉选项切换主题的功能（主题通过data-theme属性结合CSS变量实现）。此前功能一切正常，但今日突然出现所有TS代码停止执行的情况——无论进行何种操作，控制台都没有日志输出，也无法设置对应的data-theme属性。

页面组件代码（Home.tsx） #

'use client';
import { createContext, useEffect, useState } from 'react';
import { Themes, setCssTheme } from './misc/themes';
import { Form } from 'react-bootstrap';

const ThemeContext = createContext(Themes.PrincessPink);
const themeOptions = Object.values(Themes).map((theme) => (
    <option value={theme} key={theme}>
        {theme}
    </option>
));
export default function Home() {
    const [theme, setTheme] = useState(Themes.PrincessPink);
    useEffect(() => {
        setCssTheme(theme);
    });
    return (
        <main className="flex min-h-screen flex-col items-start justify-normal">
            <ThemeContext.Provider value={theme}>
                <Form.Select
                    className="m-4"
                    onChange={(e) => {
                        //TO DO: If the source code of the page is modified and incorrect value will be passed into here, will it break? How to handle this?
                        setTheme(e.target.value as Themes);
                        setCssTheme(theme);
                    }}
                >
                    {themeOptions}
                </Form.Select>
            </ThemeContext.Provider>

            <div className="ml-4"> selected theme: {theme} </div>
        </main>
    );
}

主题管理代码（misc/themes.ts） #

export enum Themes {
    PrincessPink = 'PrincessPink',
    OrangeDanger = 'OrangeDanger',
    NextJsExample = 'NextJsExample',
}
export function setCssTheme(theme: Themes) {
    document.documentElement.setAttribute('data-theme', theme);
    console.log('theme set to: ' + document.documentElement.getAttribute('data-theme'));
}

项目依赖信息 #

{
    "name": "parahumanslegaldb",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "dev": "next dev",
        "build": "next build",
        "start": "next start",
        "lint": "next lint",
        "prepare": "husky install"
    },
    "dependencies": {
        "@types/node": "20.4.9",
        "@types/react": "18.2.20",
        "@types/react-dom": "18.2.7",
        "autoprefixer": "10.4.14",
        "bootstrap": "^5.3.1",
        "eslint": "8.46.0",
        "eslint-config-next": "13.4.13",
        "next": "^13.4.13",
        "postcss": "8.4.27",
        "react": "^18.2.0",
        "react-bootstrap": "^2.8.0",
        "react-dom": "^18.2.0",
        "tailwindcss": "3.3.3",
        "typescript": "5.1.6"
    },
    "devDependencies": {
        "eslint-config-prettier": "^9.0.0",
        "husky": "^8.0.3",
        "jest": "^29.6.2",
        "prettier": "3.0.2"
    }
}

已尝试的排查步骤 #

• 在全新的Next.js示例项目中复现简单场景：将组件改为客户端组件并添加带console.log的按钮，问题依旧出现。
• 将现有应用代码精简为仅包含按钮和表单的最简结构，无任何改善。
• 在另一台电脑上克隆仓库并执行npm run dev，排除本地环境问题。
• 回退到Git版本控制中的历史正常版本，问题仍然存在。

预期与实际行为 #

• 预期：TS代码执行时控制台应有日志输出，主题切换时theme变量应更新，data-theme属性应被设置。
• 实际：仅渲染HTML标记和React Bootstrap元素，所有交互事件未触发，TS代码完全不执行。

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