fixed date-fns imports

.changeset/loud-brooms-sparkle.md

@@ -0,0 +1,20 @@
+---
+"@xmtp/react-sdk": major
+---
+
+### Fixed imports of `date-fns` package for Next.js compatibility
+
+- **Issue**: [Fix of reported bug #124](https://github.com/xmtp/xmtp-web/issues/124)
+- **Changes**:
+  - Changed imports from:
+    ```javascript
+    import xxx from "date-fns/xxx";
+    ```
+    to:
+    ```javascript
+    import { xxx } from "date-fns";
+    ```
+- **Affected Files**:
+  - `packages/react-sdk/src/helpers/caching/contentTypes/readReceipt.test.ts`
+  - `packages/react-sdk/src/helpers/caching/contentTypes/readReceipt.ts`
+  - `packages/react-sdk/src/hooks/useMessages.ts`

packages/react-sdk/src/helpers/caching/contentTypes/readReceipt.test.ts

@@ -5,7 +5,7 @@ import {
   ContentTypeReadReceipt,
   ReadReceiptCodec,
 } from "@xmtp/content-type-read-receipt";
-import subSeconds from "date-fns/subSeconds";
+import { subSeconds } from "date-fns";
 import { type CachedMessageWithId } from "@/helpers/caching/messages";
 import { getDbInstance, clearCache } from "@/helpers/caching/db";
 import {

packages/react-sdk/src/helpers/caching/contentTypes/readReceipt.ts

@@ -3,9 +3,8 @@ import {
   ContentTypeReadReceipt,
 } from "@xmtp/content-type-read-receipt";
 import { ContentTypeId } from "@xmtp/xmtp-js";
-import { parseISO } from "date-fns";
 import { z } from "zod";
-import isAfter from "date-fns/isAfter";
+import { isAfter, parseISO } from "date-fns";
 import type {
   ContentTypeConfiguration,
   ContentTypeMessageProcessor,

packages/react-sdk/src/hooks/useMessages.ts

@@ -1,7 +1,6 @@
 import { SortDirection, type DecodedMessage } from "@xmtp/xmtp-js";
 import { useCallback, useEffect, useRef, useState } from "react";
-import min from "date-fns/min";
-import subSeconds from "date-fns/subSeconds";
+import { min, subSeconds } from "date-fns";
 import type { OnError } from "../sharedTypes";
 import { useCachedMessages } from "./useCachedMessages";
 import type { CachedMessageWithId } from "@/helpers/caching/messages";