Fix::

1 - Replaced `KY` with `GOT` to address looping issues in NextJS
2 - Replaced `React-Lazy-Images` wtih Native Image Component

Author: Mustaqim Arifin

examples/full/pages/_app.tsx

@@ -3,7 +3,7 @@ import 'katex/dist/katex.min.css'
 // used for code syntax highlighting (optional)
 import 'prismjs/themes/prism-tomorrow.css'
 // core styles shared by all of react-notion-x (required)
-import 'react-notion-x/src/styles.css'
+//import 'react-notion-x/src/styles.css'
 // app styles
 import '../styles/globals.css'
 

examples/minimal/next.config.js

@@ -1,4 +1,4 @@
-export default {
+const nextConfig = {
   staticPageGenerationTimeout: 300,
   images: {
     domains: [
@@ -10,3 +10,5 @@ export default {
     formats: ['image/avif', 'image/webp']
   }
 }
+
+export default nextConfig

package.json

@@ -16,7 +16,7 @@
     "dev": "turbo dev --concurrency 50 --continue --filter='./packages/*'",
     "clean": "turbo clean",
     "test": "turbo test",
-    "test:format": "prettier --check \"**/*.{js,ts,tsx}\"",
+    "test:format": "prettier --check \"**/*.{js,ts,tsx}\" --write",
     "test:lint": "turbo test:lint",
     "test:typecheck": "turbo test:typecheck",
     "test:unit": "turbo test:unit",
@@ -32,6 +32,7 @@
     "bumpp": "catalog:",
     "del-cli": "catalog:",
     "eslint": "catalog:",
+    "got": "catalog:",
     "npm-run-all2": "catalog:",
     "prettier": "catalog:",
     "react": "catalog:",

packages/notion-client/package.json

@@ -22,12 +22,13 @@
     "watch": "tsup --watch --silent --onSuccess 'echo build successful'",
     "clean": "del build",
     "test": "run-s test:*",
-    "test:lint": "eslint .",
+    "test:lint": "eslint . --fix",
     "test:typecheck": "tsc --noEmit",
     "test:unit": "vitest run"
   },
   "dependencies": {
     "ky": "catalog:",
+    "got": "catalog:",
     "notion-types": "workspace:*",
     "notion-utils": "workspace:*",
     "p-map": "catalog:"

packages/notion-client/src/notion-api.ts

@@ -1,6 +1,5 @@
-// import { promises as fs } from 'fs'
 import type * as notion from 'notion-types'
-import ky, { type Options as KyOptions } from 'ky'
+import got, { type OptionsOfJSONResponseBody as Got_Options } from 'got'
 import {
   getBlockCollectionId,
   getPageContentBlockIds,
@@ -19,7 +18,7 @@ export class NotionAPI {
   private readonly _authToken?: string
   private readonly _activeUser?: string
   private readonly _userTimeZone: string
-  private readonly _kyOptions?: KyOptions
+  private readonly _kyOptions?: Got_Options
 
   constructor({
     apiBaseUrl = 'https://www.notion.so/api/v3',
@@ -33,7 +32,7 @@ export class NotionAPI {
     userLocale?: string
     userTimeZone?: string
     activeUser?: string
-    kyOptions?: KyOptions
+    kyOptions?: Got_Options
   } = {}) {
     this._apiBaseUrl = apiBaseUrl
     this._authToken = authToken
@@ -65,7 +64,7 @@ export class NotionAPI {
       throwOnCollectionErrors?: boolean
       collectionReducerLimit?: number
       fetchRelationPages?: boolean
-      kyOptions?: KyOptions
+      kyOptions?: Got_Options
     } = {}
   ): Promise<notion.ExtendedRecordMap> {
     const page = await this.getPageRaw(pageId, {
@@ -232,7 +231,7 @@ export class NotionAPI {
 
   fetchRelationPages = async (
     recordMap: notion.ExtendedRecordMap,
-    kyOptions: KyOptions | undefined
+    kyOptions: Got_Options | undefined
   ): Promise<notion.BlockMap> => {
     const maxIterations = 10
 
@@ -320,7 +319,7 @@ export class NotionAPI {
   }: {
     recordMap: notion.ExtendedRecordMap
     contentBlockIds?: string[]
-    kyOptions?: KyOptions
+    kyOptions?: Got_Options
   }) {
     recordMap.signed_urls = {}
 
@@ -401,7 +400,7 @@ export class NotionAPI {
     }: {
       chunkLimit?: number
       chunkNumber?: number
-      kyOptions?: KyOptions
+      kyOptions?: Got_Options
     } = {}
   ) {
     const parsedPageId = parsePageId(pageId)
@@ -442,7 +441,7 @@ export class NotionAPI {
       userTimeZone?: string
       userLocale?: string
       loadContentCover?: boolean
-      kyOptions?: KyOptions
+      kyOptions?: Got_Options
     } = {}
   ) {
     const type = collectionView?.type
@@ -620,7 +619,9 @@ export class NotionAPI {
         loader
       },
       kyOptions: {
-        timeout: 60_000,
+        timeout: {
+          request: 60_000
+        },
         ...kyOptions,
         searchParams: {
           // TODO: spread kyOptions?.searchParams
@@ -630,7 +631,7 @@ export class NotionAPI {
     })
   }
 
-  public async getUsers(userIds: string[], kyOptions?: KyOptions) {
+  public async getUsers(userIds: string[], kyOptions?: Got_Options) {
     return this.fetch<notion.RecordValues<notion.User>>({
       endpoint: 'getRecordValues',
       body: {
@@ -640,7 +641,7 @@ export class NotionAPI {
     })
   }
 
-  public async getBlocks(blockIds: string[], kyOptions?: KyOptions) {
+  public async getBlocks(blockIds: string[], kyOptions?: Got_Options) {
     return this.fetch<notion.PageChunk>({
       endpoint: 'syncRecordValues',
       body: {
@@ -657,7 +658,7 @@ export class NotionAPI {
 
   public async getSignedFileUrls(
     urls: types.SignedUrlRequest[],
-    kyOptions?: KyOptions
+    kyOptions?: Got_Options
   ) {
     return this.fetch<types.SignedUrlResponse>({
       endpoint: 'getSignedFileUrls',
@@ -668,7 +669,7 @@ export class NotionAPI {
     })
   }
 
-  public async search(params: notion.SearchParams, kyOptions?: KyOptions) {
+  public async search(params: notion.SearchParams, kyOptions?: Got_Options) {
     const body = {
       type: 'BlocksInAncestor',
       source: 'quick_find_public',
@@ -708,7 +709,7 @@ export class NotionAPI {
   }: {
     endpoint: string
     body: object
-    kyOptions?: KyOptions
+    kyOptions?: Got_Options
     headers?: any
   }): Promise<T> {
     const headers: any = {
@@ -728,21 +729,12 @@ export class NotionAPI {
 
     const url = `${this._apiBaseUrl}/${endpoint}`
 
-    const res = await ky.post(url, {
-      mode: 'no-cors',
-      ...this._kyOptions,
-      ...kyOptions,
-      json: body,
-      headers
-    })
-
-    // TODO: we're awaiting the first fetch and then separately awaiting
-    // `res.json()` because there seems to be some weird error which repros
-    // sporadically when loading collections where the body is already used.
-    // No idea why, but from my testing, separating these into two separate
-    // steps seems to fix the issue locally for me...
-    // console.log(endpoint, { bodyUsed: res.bodyUsed })
-
-    return res.json<T>()
+    return got
+      .post(url, {
+        ...kyOptions,
+        json: body,
+        headers
+      })
+      .json()
   }
 }

packages/notion-compat/package.json

@@ -22,7 +22,7 @@
     "watch": "tsup --watch --silent --onSuccess 'echo build successful'",
     "clean": "del build",
     "test": "run-s test:*",
-    "test:lint": "eslint .",
+    "test:lint": "eslint . --fix",
     "test:typecheck": "tsc --noEmit",
     "test:unit": "vitest run"
   },

packages/notion-utils/package.json

@@ -28,7 +28,7 @@
     "watch": "tsup --watch --silent --onSuccess 'echo build successful'",
     "clean": "del build",
     "test": "run-s test:*",
-    "test:lint": "eslint .",
+    "test:lint": "eslint . --fix",
     "test:typecheck": "tsc --noEmit",
     "test:unit": "vitest run"
   },

packages/react-notion-x/package.json

@@ -9,7 +9,7 @@
   "main": "./build/index.js",
   "module": "./build/index.js",
   "types": "./build/index.d.ts",
-  "sideEffects": false,
+  "sideEffects": ["src/styles.css"],
   "exports": {
     ".": {
       "types": "./build/index.d.ts",
@@ -51,7 +51,7 @@
     "watch": "tsup --watch --silent --onSuccess 'echo build successful'",
     "clean": "del build",
     "test": "run-s test:*",
-    "test:lint": "eslint .",
+    "test:lint": "eslint . --fix",
     "test:typecheck": "tsc --noEmit"
   },
   "dependencies": {
@@ -78,7 +78,7 @@
     "lodash.throttle": "catalog:",
     "react": "catalog:",
     "react-dom": "catalog:",
-    "react-pdf": "^9.1.1"
+    "react-pdf": "^9.1.1", "lightningcss": "catalog:"
   },
   "peerDependencies": {
     "react": ">=18",

packages/react-notion-x/src/components/lazy-image.tsx

@@ -1,6 +1,5 @@
 import { normalizeUrl } from 'notion-utils'
 import React from 'react'
-import { ImageState, LazyImageFull } from 'react-lazy-images'
 
 import { useNotionContext } from '../context'
 import { cs } from '../utils'
@@ -59,6 +58,23 @@ export function LazyImage({
     [zoomable, attachZoom]
   )
 
+  const [isLazyLoaded, setIsLazyLoaded] = React.useState(false)
+  const onLoadLazy = React.useCallback(() => {
+    setIsLazyLoaded(true)
+  }, [])
+
+  const lazyImageRef = React.useCallback(
+    (image: HTMLImageElement) => {
+      attachZoomRef?.(image)
+
+      // if the image is cached, we can trigger the onLoadLazy immediately
+      if (image.complete) {
+        onLoadLazy()
+      }
+    },
+    [attachZoomRef, onLoadLazy]
+  )
+
   if (previewImage) {
     const aspectRatio = previewImage.originalHeight / previewImage.originalWidth
 
@@ -81,60 +97,54 @@ export function LazyImage({
       )
     }
 
-    return (
-      // @ts-expect-error LazyImage types are out-of-date.
-      <LazyImageFull src={src!} {...rest} experimentalDecode={true}>
-        {({ imageState, ref }) => {
-          const isLoaded = imageState === ImageState.LoadSuccess
-          const wrapperStyle: React.CSSProperties = {
-            width: '100%'
-          }
-          const imgStyle: React.CSSProperties = {}
-
-          if (height) {
-            wrapperStyle.height = height
-          } else {
-            imgStyle.position = 'absolute'
-            wrapperStyle.paddingBottom = `${aspectRatio * 100}%`
-          }
-
-          return (
-            <div
-              className={cs(
-                'lazy-image-wrapper',
-                isLoaded && 'lazy-image-loaded',
-                className
-              )}
-              style={wrapperStyle}
-            >
-              <img
-                className='lazy-image-preview'
-                src={previewImage.dataURIBase64}
-                alt={alt}
-                ref={ref}
-                style={style}
-                decoding='async'
-              />
-
-              <img
-                className='lazy-image-real'
-                src={src}
-                alt={alt}
-                ref={attachZoomRef}
-                style={{
-                  ...style,
-                  ...imgStyle
-                }}
-                width={previewImage.originalWidth}
-                height={previewImage.originalHeight}
-                decoding='async'
-                loading='lazy'
-              />
-            </div>
-          )
-        }}
-      </LazyImageFull>
-    )
+    return (() => {
+      const wrapperStyle: React.CSSProperties = {
+        width: '100%'
+      }
+      const imgStyle: React.CSSProperties = {}
+
+      if (height) {
+        wrapperStyle.height = height
+      } else {
+        imgStyle.position = 'absolute'
+        wrapperStyle.paddingBottom = `${aspectRatio * 100}%`
+      }
+
+      return (
+        <div
+          className={cs(
+            'lazy-image-wrapper',
+            isLazyLoaded && 'lazy-image-loaded',
+            className
+          )}
+          style={wrapperStyle}
+        >
+          <img
+            className='lazy-image-preview'
+            src={previewImage.dataURIBase64}
+            alt={alt}
+            style={style}
+            decoding='async'
+          />
+
+          <img
+            className='lazy-image-real'
+            src={src}
+            alt={alt}
+            ref={lazyImageRef}
+            style={{
+              ...style,
+              ...imgStyle
+            }}
+            width={previewImage.originalWidth}
+            height={previewImage.originalHeight}
+            decoding='async'
+            loading='lazy'
+            onLoad={onLoadLazy}
+          />
+        </div>
+      )
+    })()
   } else {
     // TODO: GracefulImage doesn't seem to support refs, but we'd like to prevent
     // invalid images from loading as error states