[BUG] Next.js 使用 Modal 组件从 2.56.2 升级 2.63.0 报错

[Zhining]

Is there an existing issue for this?

• I have searched the existing issues

Which Component

No response

Semi Version

2.63.0

Current Behavior

在 nextjs 处于开发编译的情况下，报如下错误，似乎升级后某个别组件不兼容 SSR 的环境，直接使用 document 导致报错？ 在 2.56.2 版本的使用是正常的。

 ⨯ ReferenceError: document is not defined
    at __webpack_require__ (/Users/chenzhining/Developer/apps/ai-search/ui/.next/server/webpack-runtime.js:33:43)
    at __webpack_require__ (/Users/chenzhining/Developer/apps/ai-search/ui/.next/server/webpack-runtime.js:33:43)
    at __webpack_require__ (/Users/chenzhining/Developer/apps/ai-search/ui/.next/server/webpack-runtime.js:33:43)
    at __webpack_require__ (/Users/chenzhining/Developer/apps/ai-search/ui/.next/server/webpack-runtime.js:33:43)
    at eval (./app/cms/application/[id]/page.tsx:9:75)
    at (ssr)/./app/cms/application/[id]/page.tsx (/Users/chenzhining/Developer/apps/ai-search/ui/.next/server/app/cms/application/[id]/page.js:359:1)
    at Object.__webpack_require__ [as require] (/Users/chenzhining/Developer/apps/ai-search/ui/.next/server/webpack-runtime.js:33:43)
    at JSON.parse (<anonymous>)
digest: "1589295105"

Expected Behavior

No response

Steps To Reproduce

No response

ReproducibleCode

No response

Environment

- OS: MacOs 14.5
- browser: Edge 127.0.2651.74

Anything else?

No response

[Zhining]

我尝试了升级了几个版本，发现2.56.2升级到 2.61.0 的版本，Nextjs 14.3 开发编译都是正常的，然后从 2.61.0 升级到 2.62.1 则有问题了，把这2个标签的版本代码对比后发现确实有一个代码似乎有问题。

https://github.com/DouyinFE/semi-design/compare/v2.61.0...v2.62.1?diff=split&w=#diff-5423660e3dbf640a98e9af46c7f13b69528345bb35d8af786d6db86f16abb295

// modal/ModalContent.tsx
render() {
        const {
            maskClosable,
            className,
            getPopupContainer,
            maskFixed,
            getContainerContext,
            ...rest
        } = this.props;
        const { direction } = this.context;
        const classList = cls(className, {
            [`${cssClasses.DIALOG}-popup`]: getPopupContainer && getPopupContainer() !== document.body && !maskFixed,
            [`${cssClasses.DIALOG}-fixed`]: maskFixed,
            [`${cssClasses.DIALOG}-rtl`]: direction === 'rtl',
        });
}

大概是 Nextjs SSR 运行到 render() 这一步 访问到 document.body 这里报错了 @pointhalo

[pointhalo]

get.
@DaiQiangReal cc，与 PR #2335 改动相关

[代强]

#2395

[pointhalo]

fix 2.64.0-beta.0

[Zhining]

我对比以为只有 Modal.tsx 组件，但实际上似乎不仅仅那个问题，我这里给出一个完整的示例，那个 document undefine 的问题依然存在

"dependencies": {
    "@douyinfe/semi-ui": "2.64.0-beta.0",
    "next": "14.2.5",
    "react": "^18",
    "react-dom": "^18"
  }

我新建了一个全新的项目，使用的 nextjs App router 页面路由，新页面还是报错了

"use client";

import React from "react";
import { Form, Button } from "@douyinfe/semi-ui";

const authApiService = {
  login: async (data: any) => {
    return await fetch("/api/auth/login", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    }).then((res) => res.json());
  },
};

type FormState = {
  username: string;
  password: string;
};
export default function AuthLoginPage() {
  const handleSubmit = async (values: FormState) => {
    try {
      const res = await authApiService.login(values);
      const token = res.data.data.token;
      localStorage.setItem("token", token);

      window.location.href = `/embed/chat`;
    } catch (ex) {}
  };
  return (
    <div className="mx-auto max-w-[500px] mt-[100px] border rounded-lg shadow-lg p-8">
      <Form
        onSubmit={(values: FormState) => handleSubmit(values)}
        style={{ width: 400 }}
      >
        <Form.Input
          field="username"
          label="账号/工号"
          placeholder="Enter your empl number"
        ></Form.Input>
        <Form.Input
          field="password"
          label="密码"
          type="password"
          placeholder="Enter your password"
        ></Form.Input>

        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
          }}
        >
          <Button htmlType="submit" type="tertiary">
            登录
          </Button>
        </div>
      </Form>
    </div>
  );
}

GET /favicon.ico 200 in 12ms
 ✓ Compiled in 720ms (6016 modules)
 ⨯ ReferenceError: document is not defined
    at __webpack_require__ (/home/zhining/my_apps/test-app/.next/server/webpack-runtime.js:33:43)
    at __webpack_require__ (/home/zhining/my_apps/test-app/.next/server/webpack-runtime.js:33:43)
    at __webpack_require__ (/home/zhining/my_apps/test-app/.next/server/webpack-runtime.js:33:43)
    at __webpack_require__ (/home/zhining/my_apps/test-app/.next/server/webpack-runtime.js:33:43)
    at eval (./app/page.tsx:9:75)
    at (ssr)/./app/page.tsx (/home/zhining/my_apps/test-app/.next/server/app/page.js:228:1)
    at Object.__webpack_require__ [as require] (/home/zhining/my_apps/test-app/.next/server/webpack-runtime.js:33:43)
    at JSON.parse (<anonymous>)
digest: "3315334200"
 GET / 500 in 150ms
 ✓ Compiled in 958ms (6016 modules)
 GET /favicon.ico 200 in 509ms
 ⨯ ReferenceError: document is not defined
    at __webpack_require__ (/home/zhining/my_apps/test-app/.next/server/webpack-runtime.js:33:43)
    at __webpack_require__ (/home/zhining/my_apps/test-app/.next/server/webpack-runtime.js:33:43)
    at __webpack_require__ (/home/zhining/my_apps/test-app/.next/server/webpack-runtime.js:33:43)
    at __webpack_require__ (/home/zhining/my_apps/test-app/.next/server/webpack-runtime.js:33:43)
    at eval (./app/page.tsx:9:75)
    at (ssr)/./app/page.tsx (/home/zhining/my_apps/test-app/.next/server/app/page.js:228:1)
    at Object.__webpack_require__ [as require] (/home/zhining/my_apps/test-app/.next/server/webpack-runtime.js:33:43)
    at JSON.parse (<anonymous>)
digest: "3315334200"
 GET / 500 in 137ms

@pointhalo @DaiQiangReal 可以稳定复现，切回去 @douyinfe/semi-ui@2.61.0 是的可以，我猜测是否是因为引入新组件，在公共主入口中引入了 不支持SSR的代码导致报错了？

[Zhining]

fix 2.64.0-beta.0

问题还是存在，我查看 2.61.0 对比 2.62.0 对比引入了3个新的组件，是否有可能是因为主入口引入的3个新组件的基础引入导致报错了