[BUG] Nextjs 引入 2.62.0 以上版本均出现 document is not undefined 的问题

czn574775237 commented 1 month ago

Is there an existing issue for this?

[X] I have searched the existing issues

Which Component

No response

Semi Version

2.64.0-beta.0

Current Behavior

我创建全新 nextjs 的项目，没有其他依赖干扰，使用的 nextjs App router 页面路由，新页面还是报错了，关联的 issue #2380 ，似乎并不仅仅 modal 的代码原因

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

"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的代码导致报错了？

Expected Behavior

No response

Steps To Reproduce

No response

ReproducibleCode

No response

Environment

- OS: win 10 wsl2 ubuntu20.04
- browser: edge
- node: 20

Anything else?

No response

DaiQiangReal commented 1 month ago

可以把你起的项目打成zip包发一下吗？我这里起的 nextjs 项目没有问题

czn574775237 commented 1 month ago

示例项目代码

nextjs-test-app.zip

pnpm i
pnpm dev

我分别在 win 10 和 mac os 15.1 beta 环境都能复现，你确认一下哈

DaiQiangReal commented 1 month ago

我这里没问题啊，就 yarn 然后 yarn dev

czn574775237 commented 1 month ago

跟 yarn / pnpm 没有关系吧，我用 yarn 安装编译也是一样报错。

yarn.lock 文件如下

"@douyinfe/semi-animation-react@2.64.0-beta.0":
  version "2.64.0-beta.0"
  resolved "https://registry.npmmirror.com/@douyinfe/semi-animation-react/-/semi-animation-react-2.64.0-beta.0.tgz#2344068ac02d2a707f9e4de44bde133948c05902"
  integrity sha512-IiEcmB6rFdTxbBse+jxdcY8jH2a6sZdzxgA4YDXfZx+o8CdVlNPEqXhteJrErU456onmfmlQ/zJjuT+fjskFJQ==
  dependencies:
    "@douyinfe/semi-animation" "2.64.0-beta.0"
    "@douyinfe/semi-animation-styled" "2.64.0-beta.0"
    classnames "^2.2.6"

"@douyinfe/semi-animation-styled@2.64.0-beta.0":
  version "2.64.0-beta.0"
  resolved "https://registry.npmmirror.com/@douyinfe/semi-animation-styled/-/semi-animation-styled-2.64.0-beta.0.tgz#01ee2e9edb8dd3c1e05d071c70741407b2cbccd4"
  integrity sha512-fsaNSe6fPhx35uKprwJvV887821FnMyzXxrrhxCSsY4kHSuyv7Xc+QEmMl19mZduuMaKQWyIjON46nXjnb5UAQ==

"@douyinfe/semi-animation@2.64.0-beta.0":
  version "2.64.0-beta.0"
  resolved "https://registry.npmmirror.com/@douyinfe/semi-animation/-/semi-animation-2.64.0-beta.0.tgz#d8bc14f7afcbd5b438f93f152822597c0d43679c"
  integrity sha512-Wxy9mZRcEtamPMEr6yk1BtQ9V1tBl7W/DuzwbYw7Xx+W4casIeS9bOxUzpSc5IQCVTJ5SroZusww/pRFw4LerQ==
  dependencies:
    bezier-easing "^2.1.0"

"@douyinfe/semi-foundation@2.64.0-beta.0":
  version "2.64.0-beta.0"
  resolved "https://registry.npmmirror.com/@douyinfe/semi-foundation/-/semi-foundation-2.64.0-beta.0.tgz#51da6abf108caf51a510e1f897eef44ed719f2f5"
  integrity sha512-iQvk+wSDwlbnb6VGF1cwRLUJjcSjBSr8wwbkZb3TJdGsZxtaosM4LIP8D4ODep7f2N3y3yMykMG/gWHT8nYP8A==
  dependencies:
    "@douyinfe/semi-animation" "2.64.0-beta.0"
    "@mdx-js/mdx" "^3.0.1"
    async-validator "^3.5.0"
    classnames "^2.2.6"
    date-fns "^2.29.3"
    date-fns-tz "^1.3.8"
    fast-copy "^3.0.1 "
    lodash "^4.17.21"
    lottie-web "^5.12.2"
    memoize-one "^5.2.1"
    prismjs "^1.29.0"
    remark-gfm "^4.0.0"
    scroll-into-view-if-needed "^2.2.24"

"@douyinfe/semi-icons@2.64.0-beta.0":
  version "2.64.0-beta.0"
  resolved "https://registry.npmmirror.com/@douyinfe/semi-icons/-/semi-icons-2.64.0-beta.0.tgz#ccf27e0a135eea64a84c032fcc758d5f1a7fec05"
  integrity sha512-o3VGHFXPvp2PGn/jSjjzpNHDG6kdmPLg87Ga8RwCZgl13zYFGE3r0Q+Ay5Z55lCnLvUhg7YSWuQW+SUl2u3x2A==
  dependencies:
    classnames "^2.2.6"

"@douyinfe/semi-illustrations@2.64.0-beta.0":
  version "2.64.0-beta.0"
  resolved "https://registry.npmmirror.com/@douyinfe/semi-illustrations/-/semi-illustrations-2.64.0-beta.0.tgz#bef463b266d34e0bab5d7d210abcf1821cc9dcf0"
  integrity sha512-C77NH1VJtl4YBFOFDvnAVOfHZvQ/vd6TmTOGOXoXXvA9KL95GPUe7Qmo5gsACeJbv7heONvDLgCgp218QbHLDw==

"@douyinfe/semi-theme-default@2.61.0":
  version "2.61.0"
  resolved "https://registry.npmmirror.com/@douyinfe/semi-theme-default/-/semi-theme-default-2.61.0.tgz#a7e9bf9534721c12af1d0eeb5d5a2de615896a23"
  integrity sha512-obn/DOw4vZyKFAlWvZxHTpBLAK9FO9kygTSm2GROgvi+UDB2PPU6l20cuUCsdGUNWJRSqYlTTVZ1tNYIyFZ5Sg==

"@douyinfe/semi-ui@2.64.0-beta.0":
  version "2.64.0-beta.0"
  resolved "https://registry.npmmirror.com/@douyinfe/semi-ui/-/semi-ui-2.64.0-beta.0.tgz#5f2861b9f16f4f571df92a3535317a9fd058207e"
  integrity sha512-+eDD3ZBWT1+zIUCmjcN0S1rmBW2jdXohTCt7NjB00v0U1ofApP+g6A3cBpKMgD+H2zLxLbtERnf/TsHdDpP4dA==
  dependencies:
    "@dnd-kit/core" "^6.0.8"
    "@dnd-kit/sortable" "^7.0.2"
    "@dnd-kit/utilities" "^3.2.1"
    "@douyinfe/semi-animation" "2.64.0-beta.0"
    "@douyinfe/semi-animation-react" "2.64.0-beta.0"
    "@douyinfe/semi-foundation" "2.64.0-beta.0"
    "@douyinfe/semi-icons" "2.64.0-beta.0"
    "@douyinfe/semi-illustrations" "2.64.0-beta.0"
    "@douyinfe/semi-theme-default" "2.61.0"
    async-validator "^3.5.0"
    classnames "^2.2.6"
    copy-text-to-clipboard "^2.1.1"
    date-fns "^2.29.3"
    date-fns-tz "^1.3.8"
    fast-copy "^3.0.1 "
    lodash "^4.17.21"
    prop-types "^15.7.2"
    react-resizable "^3.0.5"
    react-window "^1.8.2"
    scroll-into-view-if-needed "^2.2.24"
    utility-types "^3.10.0"

你安装的版本也是一样的吗？

congtou221 commented 1 month ago

semi-ui 2.63.1 报同样的错，请问老版本没有这个问题吗？需要降级到哪个版本？

czn574775237 commented 1 month ago

降级到 2.61.0 可以

DouyinFE / semi-design