Tencent / tdesign-mobile-react

A React Mobile UI components lib for TDesign.
https://tdesign.tencent.com/mobile-react
MIT License
60 stars 66 forks source link

[Swiper] 在server side render项目中会报ReferenceError: window is not defined #283

Open zhangyuxiang1226 opened 2 years ago

zhangyuxiang1226 commented 2 years ago

tdesign-mobile-react 版本

0.2.0

重现链接

No response

重现步骤

package.json版本信息如下

{
  "name": "portal-market",
  "version": "1.0.0",
  "description": "腾讯云国际站官网云市场应用",
  "private": true,
  "scripts": {
    "dev": "next dev -p 3002",
    "debug": "NODE_OPTIONS='--inspect=9002' next dev -p 3002",
    "build": "next build",
    "start": "next start -p 3002",
    "local": "cross-env npm_lifecycle_event=build ZONE_ENV=test ASSET_PREFIX='' BASE_PATH='' next dev -p 3002",
    "local:build": "cross-env npm_lifecycle_event=build ZONE_ENV=test ASSET_PREFIX='' BASE_PATH='' next build && cross-env npm_lifecycle_event=build ZONE_ENV=test ASSET_PREFIX='' BASE_PATH='' next start -p 3002",
    "scan": "npx @tencent/fostar lang-collect"
  },
  "dependencies": {
    "@emotion/css": "^11.5.0",
    "@emotion/server": "^11.10.0",
    "@tencent/cms-design-component": "^2.1.136",
    "@tencent/particle-ui": "^1.0.0",
    "antd": "4.16.13",
    "classnames": "^2.3.1",
    "common": "workspace:^1.0.1",
    "common-translation": "workspace:^1.0.0",
    "cos-js-sdk-v5": "^1.3.4",
    "final-form": "^4.20.6",
    "libphonenumber-js": "^1.10.4",
    "market-design-ui": "workspace:^1.0.0",
    "nanoid": "^3.1.30",
    "next": "12.0.7",
    "next-transpile-modules": "^9.0.0",
    "portal-common": "workspace:^1.0.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-final-form": "^6.5.7",
    "sass": "^1.45.0",
    "swiper": "^8.3.2",
    "tdesign-icons-react": "^0.1.6",
    "tdesign-mobile-react": "^0.2.0",
    "tdesign-react": "^0.38.0",
    "webpack-plugin-build-mainfest": "workspace:^0.0.1"
  },
  "devDependencies": {
    "@tencent/eslint-config-tencent": "^0.12.3",
    "@tencent/eslint-plugin-tea-i18n": "^0.1.14",
    "@types/react": "18.0.1",
    "@types/react-dom": "^18.0.1",
    "@typescript-eslint/eslint-plugin": "^4.11.1",
    "@typescript-eslint/parser": "^4.33.0",
    "cross-env": "^7.0.3",
    "eslint": "^7.32.0",
    "eslint-plugin-jsdoc": "^39.3.4",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.30.1",
    "glob": "^7.2.0",
    "hostile": "^1.3.3",
    "next-global-css": "^1.3.1",
    "next-plugin-antd-less": "^1.7.0",
    "prettier": "^2.7.1",
    "typescript": "^4.7.4"
  }
}

安装tdesign-mobile-react了之后,运行项目,会报 ReferenceError: window is not defined 错误

期望结果

可以正常运行

实际结果

由于ssr构建时没有window,报错指向 _util/canUseDom 中有解析window对象出错

框架版本

nextjs 12.0.7

浏览器版本

104.0.5112.79

系统版本

macOS 12.4

Node版本

v14.19.2

补充说明

No response

github-actions[bot] commented 2 years ago

👋 @zhangyuxiang1226,感谢给 TDesign 提出了 issue。 请根据 issue 模版确保背景信息的完善,我们将调查并尽快回复你。

zhangyuxiang1226 commented 2 years ago
image

By the way~ 'item' 单词的拼写可以修正一下

LeeJim commented 2 years ago

我来处理下