diff --git a/package.json b/package.json index 14a2fb15..5629a75d 100644 --- a/package.json +++ b/package.json @@ -62,7 +62,8 @@ "rax": "1.2.3-beta.1", "rax-test-renderer": "1.1.0-beta.1", "typescript": "3.9.10", - "@types/babel__traverse": "7.17.1" + "@types/babel__traverse": "7.17.1", + "@types/node": "14" }, "scripts": { "preinstall": "npx only-allow pnpm", diff --git a/packages/rax-swiper/CHANGELOG.md b/packages/rax-swiper/CHANGELOG.md index e7397e45..c3f16cdc 100644 --- a/packages/rax-swiper/CHANGELOG.md +++ b/packages/rax-swiper/CHANGELOG.md @@ -1,5 +1,9 @@ # Changelog +## 0.2.3 + +- [fix] temporary fix for `swiper.js` in SSR. + ## 0.2.2 - [feat] both support webpack 4 and webpack 5. diff --git a/packages/rax-swiper/package.json b/packages/rax-swiper/package.json index b8765c15..ca5f7944 100644 --- a/packages/rax-swiper/package.json +++ b/packages/rax-swiper/package.json @@ -1,7 +1,7 @@ { "name": "rax-swiper", "author": "rax", - "version": "0.2.2", + "version": "0.2.3", "description": "Swiper component for Rax.", "license": "BSD-3-Clause", "main": "lib/index.js", diff --git a/packages/rax-swiper/src/web/init-swiper.js b/packages/rax-swiper/src/web/init-swiper.js index 7f3a5937..bb81cc6a 100644 --- a/packages/rax-swiper/src/web/init-swiper.js +++ b/packages/rax-swiper/src/web/init-swiper.js @@ -6,6 +6,18 @@ import { needsNavigation, needsPagination, needsScrollbar } from './utils'; // both support webpack 4 and 5 resolving rule. import 'swiper/swiper-bundle.min.css'; +/** + * TODO: Support SSR in Swiper component of HyperKit. + * Temporary solution to prevent swiper.js errors under SSR. + * + * Swiper.js use ssr-window under the hood, which ensure `document` is defined. + * So we need to ensure `document.documentElement` and `document.documentElement.style` only. + */ +if (!document.documentElement?.style) { + document.documentElement = document.documentElement || {}; + document.documentElement.style = document.documentElement.style || {}; +} + Swiper.use([Autoplay, Pagination]); function initSwiper(swiperParams) { return new Swiper(swiperParams);