NextJS集成SurveyJS时调用StylesManager.applyTheme报document未定义解决咨询

问题核心：Next.js 默认会先在 Node.js 服务端完成组件渲染流程，该运行环境不存在浏览器侧的document全局对象，而applyTheme内部需要操作DOM完成样式注入，直接在SSR阶段触发就会抛出ReferenceError: document is not defined。

方案1：通过Next动态导入关闭对应组件的SSR能力 #

• 操作逻辑：将包含applyTheme调用的Survey相关组件，使用next/dynamic做客户端专属加载，彻底跳过该模块的服务端渲染流程

import dynamic from 'next/dynamic'

// 封装后的问卷组件内部已经实现了StylesManager.applyTheme调用
const SurveyClientOnly = dynamic(
  () => import('../components/SurveyModule'),
  { ssr: false }
)

export default function Page() {
  return <SurveyClientOnly surveyConfig={你的问卷JSON配置} />
}

• 方案优势：改动范围小，只要把带客户端依赖的组件包一层即可，不需要调整原有组件内部的业务逻辑。

方案2：将主题调用迁移到客户端专属生命周期内执行 #

如果不想改动组件的加载方式，可以直接把applyTheme的执行逻辑挪到仅客户端会触发的代码块中：

• 针对App Router（Next 13+）项目：
  1. 给包含Survey逻辑的组件加上'use client'标记，声明该组件运行在客户端环境
  2. 把applyTheme的调用放到useEffect钩子内部，该钩子的代码只会在组件完成客户端挂载后执行，SSR阶段完全不会运行

  'use client'
  import { StylesManager } from "survey-core";
  import { useEffect } from "react";
  import { Model } from "survey-core";
  
  export function SurveyModule({ surveyConfig }) {
    const surveyModel = new Model(surveyConfig)
    useEffect(() => {
      // 仅客户端执行，此时document对象已完成初始化
      StylesManager.applyTheme("defaultV2")
    }, [])
  
    return <SurveyReact model={surveyModel} />
  }
  

• 针对Pages Router项目：把主题调用放到useEffect、类组件的componentDidMount生命周期中，不要将代码写在组件顶层、getServerSideProps、getStaticProps等服务端专属逻辑块内。
• 可以补充一层兜底校验，避免极端环境下的异常：

  useEffect(() => {
    if (typeof document !== "undefined") {
      StylesManager.applyTheme("defaultV2")
    }
  }, [])
  

方案3：全局环境判断分支执行 #

如果必须在代码顶层调用主题方法，可以在执行前加浏览器环境判断，SSR阶段直接跳过该逻辑：

import { StylesManager } from "survey-core";

// 仅检测到存在document对象时才执行主题注入，服务端环境直接跳过
if (typeof document !== "undefined") {
  StylesManager.applyTheme("defaultV2")
}

注意事项 #

• 绝对不要将applyTheme的逻辑放到Next.js的服务端数据获取方法中，这类代码全程运行在Node.js环境，永远无法访问浏览器DOM对象，必然触发报错。
• 确认StylesManager从survey-core包导入，避免错误引入浏览器专属的CDN版SurveyJS包，导致依赖版本不匹配引发的额外问题。

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