fix(hooks): export polyfills as a separate entry point (#2529)

* fix(hooks): export polyfills as a separate entry point * docs: changeset * refactor: use globalThis * refactor(hooks): expose polyfills as separate entrypoint
commercetools · May 23, 2023 · b6fae35 · b6fae35 · vercel · May 23, 2023
1 parent 7f7e1e0
commit b6fae35
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 4 deletions.
diff --git a/.changeset/hot-ways-care.md b/.changeset/hot-ways-care.md
@@ -0,0 +1,5 @@
+---
+'@commercetools-uikit/hooks': patch
+---
+
+Export polyfill as separate entry point. Consumers should import this explicitly in their application when using SSR.
diff --git a/packages/hooks/index.ts b/packages/hooks/index.ts
diff --git a/packages/hooks/package.json b/packages/hooks/package.json
@@ -17,7 +17,10 @@
   "sideEffects": false,
   "main": "dist/commercetools-uikit-hooks.cjs.js",
   "module": "dist/commercetools-uikit-hooks.esm.js",
-  "files": ["dist"],
+  "preconstruct": {
+    "entrypoints": ["./index.ts", "./polyfills.ts"]
+  },
+  "files": ["dist", "polyfills"],
   "dependencies": {
     "@babel/runtime": "^7.20.13",
     "@babel/runtime-corejs3": "^7.20.13",

diff --git a/packages/hooks/polyfills/package.json b/packages/hooks/polyfills/package.json
@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-hooks-polyfills.cjs.js",
+  "module": "dist/commercetools-uikit-hooks-polyfills.esm.js"
+}
diff --git a/...oks/src/use-mutation-observer/polyfill.ts → packages/hooks/src/polyfills.ts b/...oks/src/use-mutation-observer/polyfill.ts → packages/hooks/src/polyfills.ts
@@ -1,5 +1,6 @@
 // Polyfill for `MutationObserver` when used with SSR.
-global.MutationObserver =
+// eslint-disable-next-line no-undef
+globalThis.MutationObserver =
   typeof window !== 'undefined' && 'MutationObserver' in window
     ? window.MutationObserver
     : class MutationObserver {

diff --git a/packages/hooks/src/use-mutation-observer/use-mutation-observer.ts b/packages/hooks/src/use-mutation-observer/use-mutation-observer.ts
@@ -2,7 +2,6 @@
 // except for the usage of `MutationObserver` instead of `IntersectionObserver`.
 import { useEffect, useLayoutEffect, useRef } from 'react';
 import rafSchd from 'raf-schd';
-import './polyfill';
 
 export type TUseMutationObserverCallback = (
   mutationsList: MutationRecord[],