fix: stream-feeds-react-tutorial-related adjustments #191

arnautov-anton · 2025-12-15T17:31:47Z

🎫 Ticket: https://linear.app/stream/issue/REACT-690

💡 Overview

React tutorial sample application had troubles running on React v18 and lower for seemingly unknown reasons and errors that kept popping up weren't really telling anything useful either.

The issue was in the monorepo setup and Vite's inability to bundle only one (specified) version of React into the final application's bundle.

While exploring different approaches and solutions I decided to clean things up a bit and get rid of some annoying parts, here's the full list of changes.

adjusted tsconfig setup in the client, different files with different purposes
- tsconfig.lib.json - for client types
- tsconfig.test.json - for test files (excluding the source files)
- tsconfig.node.json - for vite.config.ts
removed @self alias imports as a part of the investigation (tsc does not really resolve these when it's compiling declarations and that's why I had to use vite-plugin-dts which is still in beta), they require some extra setup and are generally not that useful
Vite does not externalize imports with different entrypoints other than ".", @stream-io/state-store is externalized while @stream-io/state-store/react-bindings is treated like a separate package and gets imported, added regular expressions to prevent subpaths from being bundled
✨main course✨: upgraded Yarn to v4 to be able to use catalog protocol and cataloged react/react-dom (types too) versions across the monorepo to prevent Vite from bundling different React versions and breaking the dev setup, published SDK works well with React >=v17

Fixes: REACT-690

Summary by CodeRabbit

New Features
- Broadened React support to include v17 and made file/image upload parameters optional for more flexible usage.
Build & Dependencies
- Upgraded Yarn to 4.12.0 and updated workspace build/test scripts.
- Reworked TypeScript project layout and build configs for improved library declaration output and Node builds.
Refactor
- Internal module/type import and packaging config cleanup; bundling/export settings adjusted for consistent outputs.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

arnautov-anton · 2025-12-15T17:57:45Z

packages/feeds-client/src/feeds-client/feeds-client.ts

  uploadFile = (
-    request: Omit<FileUploadRequest, 'file'> & { file: StreamFile },
+    request?: Omit<FileUploadRequest, 'file'> & { file?: StreamFile | string },
  ) => {
    return super.uploadFile({
-      // @ts-expect-error API spec says file should be a string
-      file: request.file,
+      file: request?.file as string,
    });
  };

-  // @ts-expect-error API spec says file should be a string
  uploadImage = (
-    request: Omit<ImageUploadRequest, 'file'> & { file: StreamFile },
+    request?: Omit<ImageUploadRequest, 'file'> & { file?: StreamFile | string },
  ) => {
    return super.uploadImage({
-      // @ts-expect-error API spec says file should be a string
-      file: request.file,
-      // @ts-expect-error form data will only work if this is a string
-      upload_sizes: JSON.stringify(request.upload_sizes),
+      file: request?.file as string,
+      upload_sizes: JSON.stringify(
+        request?.upload_sizes,
+      ) as unknown as ImageSize[],
    });
  };


We can extend the type request type but cannot change it as we're just extending the base class, I've adjusted this so that it matches but it'd be better if this could be changed in the base class (the spec.).

arnautov-anton · 2025-12-15T17:58:18Z

packages/feeds-client/package.json

      "import": "./dist/es/index.mjs",
      "require": "./dist/cjs/index.js",
-      "default": "./dist/es/index.mjs"
+      "default": "./dist/cjs/index.js"


I've changed these to default to CommonJS, it's safer.

arnautov-anton · 2025-12-15T18:34:09Z

package.json

+    "build:all": "yarn workspaces foreach -Avp --topological-dev run build",
+    "build:libs": "yarn workspaces foreach -Avp --topological-dev --no-private run build",
    "build:client": "yarn workspace @stream-io/feeds-client run build",
    "build:react-native-sdk": "yarn workspace @stream-io/feeds-react-native-sdk run build",
    "build:react-sdk": "yarn workspace @stream-io/feeds-react-sdk run build",
-    "build:react-tutorial": "yarn build:client && yarn build:react-sdk && yarn workspace stream-feeds-react-tutorial run build",
-    "clean:all": "yarn workspaces foreach -vt run clean",
+    "build:react-tutorial": "yarn workspaces foreach -Avpt --include '{packages/{feeds-client,react-sdk},sample-apps/react-tutorial}' run build",
+    "clean:all": "yarn workspaces foreach -Avp run clean",
    "lint:all": "eslint --max-warnings=0 --cache '**/*.{ts,tsx}'",
    "lint:all:fix": "eslint --max-warnings=0 '**/*.{ts,tsx}' --fix",
-    "test:ci:all": "yarn workspaces foreach -vt run test-ci",
-    "test:ci:libs": "yarn workspaces foreach -vt --no-private run test-ci",
-    "test:docs-snippets": "yarn workspaces foreach -vt --no-private run test-docs-snippets",
+    "test:ci:all": "yarn workspaces foreach -Avt run test-ci",
+    "test:ci:libs": "yarn workspaces foreach -Avt --no-private run test-ci",
+    "test:docs-snippets": "yarn workspaces foreach -Avt --no-private run test-docs-snippets",


New yarn now requires to specify extra option in foreach (A - all).

coderabbitai · 2025-12-17T10:59:48Z

Walkthrough

Migration and build overhaul: Yarn upgraded to 4.12.0, TypeScript configs moved to a composite project layout, many @self barrel imports replaced with explicit relative paths across the feeds-client and related packages, package exports and peer React ranges adjusted, and several build/Vite/npm scripts and configs updated.

Changes

Cohort / File(s)	Change Summary
Yarn & workspace scripts `.yarnrc.yml`, `package.json`	Upgraded yarnPath to `[email protected]`; added catalog entries for React packages; changed compression/cache keys; refactored workspace scripts to use `-Avp`, `--topological-dev`, `--include`, and related flags.
feeds-client package config & exports `packages/feeds-client/package.json`, `packages/feeds-client/vite.config.ts`	Added `types` field; changed package export defaults from ESM `.mjs` to CJS `.js`; expanded React peer range to include `^17`; removed `vite-plugin-dts` and `@self` alias, changed externalization to RegExp subpath matching, set `emptyOutDir:false`, added esbuild tsconfig override.
TypeScript project layout (feeds-client) `packages/feeds-client/tsconfig.json`, `packages/feeds-client/tsconfig.lib.json`, `packages/feeds-client/tsconfig.node.json`, `packages/feeds-client/tsconfig.test.json`	Replaced monolithic tsconfig with project-reference composite setup and added specialized tsconfigs for lib (declaration-only), node, and tests.
API surface / runtime types (feeds-client) `packages/feeds-client/src/feeds-client/feeds-client.ts`	Made `uploadFile`/`uploadImage` request optional and accept `StreamFile
Import refactor — bindings, hooks, wrappers (~40 files) `packages/feeds-client/src/...` (contexts/, hooks/, wrappers/, common/, feed/, utils/)	Systematically replaced `@self` barrel imports with explicit relative paths for types and utilities across contexts, hooks, wrappers, event handlers, and utils; added/imported specific React helpers (e.g., `useMemo`, `useCallback`) and introduced a few type assertions (`satisfies`).
Activity-state safety tweak `packages/feeds-client/src/activity-with-state-updates/activity-with-state-updates.ts`	Changed GetCommentsRequest import source and added optional chaining guard when updating feed state (`this.feed?.state.partialNext(...)`).
Build & packaging (react-sdk) `packages/react-sdk/package.json`, `packages/react-sdk/tsconfig.json`, `packages/react-sdk/README.md`	Simplified build scripts (`clean`, `build`, `prepublishOnly`), removed legacy lifecycle scripts, expanded React peer range to include `^17`, rewrote tsconfig to nodenext/composite settings, updated README React support string.
React Native SDK updates `packages/react-native-sdk/package.json`, `packages/react-native-sdk/tsconfig.json`	Updated devDependency versions and moved React entries to `catalog:` format; updated project reference to `feeds-client/tsconfig.lib.json`.
Sample apps — dependency & import updates `sample-apps//package.json`, `sample-apps/react-tutorial/src/`	Replaced pinned React/react-dom and `@types` specifications with `catalog:` placeholders; removed file extensions in imports and adjusted some type import sources (moved types to feeds-react-sdk).

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Focus review on:
- packages/feeds-client/src/feeds-client/feeds-client.ts — optional upload params and union typing/serialization
- packages/feeds-client/package.json exports change (ESM → CJS) and downstream consumer compatibility
- packages/feeds-client/vite.config.ts — external RegExp matching and removed @self alias
- New tsconfig files and project references for build correctness
- Large-scale import path changes — ensure no broken or unresolved imports remain

Poem

🐰 I hopped through paths both new and old,
Replaced the barrels, trimmed the fold.
Yarn leapt forward, TS split its art,
Uploads softened, exports set apart.
A tiny rabbit cheers the grind — new builds, new paths, a tidy mind! 🎉

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run `@coderabbitai generate docstrings` to improve docstring coverage.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	Title accurately reflects the main objective: addressing stream-feeds-react-tutorial issues through TypeScript config adjustments, @self alias removal, Vite bundling fixes, and Yarn v4 upgrade with catalog protocol.
Description check	✅ Passed	PR description includes ticket reference, clear overview of root cause, detailed implementation notes covering all major changes (tsconfig restructuring, @self removal, Vite regex externalization, Yarn v4 upgrade), and outcome statement.
Linked Issues check	✅ Passed	The PR comprehensively addresses REACT-690 by identifying the root cause (Vite bundling multiple React versions), implementing fixes (Yarn v4 catalog protocol), and ensuring single React version in final bundle across React >=17.
Out of Scope Changes check	✅ Passed	All changes directly support the primary objective of fixing React 18+ compatibility and Vite bundling issues. TypeScript config restructuring, import path changes, and dependency version management are all necessary for resolving the identified root cause.

✨ Finishing touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch fix/feeds-client/react-18

📜 Recent review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 2556518 and 0fb7e97.

⛔ Files ignored due to path filters (1)

yarn.lock is excluded by !**/yarn.lock, !**/*.lock

📒 Files selected for processing (1)

.yarnrc.yml (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

.yarnrc.yml

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

GitHub Check: lint-and-test (22.x)

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 5

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (4)

packages/feeds-client/src/bindings/react/hooks/feed-state-hooks/useFollowing.ts (1)
22-22: Fix type mismatch: should reference loadNextPageFollowing not loadNextPageFollowers.

The type definition incorrectly references Feed['loadNextPageFollowers'], but the implementation (lines 35-36) correctly uses loadNextPageFollowing. This mismatch breaks the type contract for the loadNextPage function returned by this hook.

Apply this diff:
   loadNextPage: (
-    ...options: Parameters<Feed['loadNextPageFollowers']>
+    ...options: Parameters<Feed['loadNextPageFollowing']>
   ) => Promise<void>;
packages/feeds-client/src/bindings/react/hooks/useCreateFeedsClient.ts (1)
22-24: Critical: Resource leak—initial client instance is never disconnected.

The client created in the useState initializer (line 23) is immediately replaced when the useEffect runs (line 50), but the initial instance's disconnectUser is never called. This leaks any resources (connections, listeners, timers) that FeedsClient acquires in its constructor.

Apply this diff to fix the leak:
-  const [client, setClient] = useState<FeedsClient | null>(
-    () => new FeedsClient(apiKey, options),
-  );
+  const [client, setClient] = useState<FeedsClient | null>(null);
The useEffect will create and connect the client on mount, and the cleanup will properly disconnect it. This also aligns better with React 18's StrictMode behavior, which remounts components in development.

Based on learnings, backwards compatibility and high test coverage are priorities in this SDK—consider adding a test that verifies client cleanup to prevent regressions.
packages/react-sdk/package.json (1)
6-10: Missing CommonJS export condition.

The package only exports ESM format, which will break CommonJS consumers. According to the coding guidelines and learnings, packages should work in both CommonJS and ES modules.

Apply this diff to add CommonJS support:
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
+     "require": "./dist/index.cjs",
      "import": "./dist/index.js"
    }
  }
You'll also need to update the build script to generate both formats (e.g., using tsup or a bundler that supports dual builds).

Based on learnings, packages should support both CommonJS and ES modules.
packages/react-native-sdk/package.json (1)
4-4: Update packageManager to Yarn 4.

The packageManager field still references Yarn 3.5.0, but the PR upgrades Yarn to 4.12.0. Update this field to match the new version or remove it if relying on root-level packageManager.

Apply this diff:
- "packageManager": "[email protected]",
+ "packageManager": "[email protected]",

🧹 Nitpick comments (1)

sample-apps/react-native/ExpoTikTokApp/package.json (1)

57-57: Verify @types/react catalog version compatibility.

The @types/react package now uses catalog resolution. Ensure the catalog version is compatible with both the React version and the TypeScript version (~5.9.2) specified in devDependencies.

Based on learnings: The SDK should support React 18+ and React Native 0.73+. Verify the catalog definitions provide compatible versions for this React Native 0.81.4 application.

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 2226a1e and 2556518.

⛔ Files ignored due to path filters (6)

.yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs is excluded by !**/.yarn/**
.yarn/plugins/@yarnpkg/plugin-typescript.cjs is excluded by !**/.yarn/**
.yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs is excluded by !**/.yarn/**
.yarn/releases/yarn-3.5.0.cjs is excluded by !**/.yarn/**
.yarn/releases/yarn-4.12.0.cjs is excluded by !**/.yarn/**
yarn.lock is excluded by !**/yarn.lock, !**/*.lock

📒 Files selected for processing (50)

.yarnrc.yml (1 hunks)
package.json (1 hunks)
packages/feeds-client/package.json (4 hunks)
packages/feeds-client/src/activity-with-state-updates/activity-with-state-updates.ts (2 hunks)
packages/feeds-client/src/bindings/react/contexts/StreamFeedContext.tsx (1 hunks)
packages/feeds-client/src/bindings/react/contexts/StreamFeedsContext.tsx (1 hunks)
packages/feeds-client/src/bindings/react/contexts/StreamSearchContext.tsx (1 hunks)
packages/feeds-client/src/bindings/react/contexts/StreamSearchResultsContext.tsx (1 hunks)
packages/feeds-client/src/bindings/react/hooks/client-state-hooks/useClientConnectedUser.ts (1 hunks)
packages/feeds-client/src/bindings/react/hooks/client-state-hooks/useWsConnectionState.ts (1 hunks)
packages/feeds-client/src/bindings/react/hooks/feed-state-hooks/useActivityComments.ts (1 hunks)
packages/feeds-client/src/bindings/react/hooks/feed-state-hooks/useAggregatedActivities.ts (1 hunks)
packages/feeds-client/src/bindings/react/hooks/feed-state-hooks/useComments.ts (1 hunks)
packages/feeds-client/src/bindings/react/hooks/feed-state-hooks/useFeedActivities.ts (1 hunks)
packages/feeds-client/src/bindings/react/hooks/feed-state-hooks/useFeedMetadata.ts (1 hunks)
packages/feeds-client/src/bindings/react/hooks/feed-state-hooks/useFollowers.ts (1 hunks)
packages/feeds-client/src/bindings/react/hooks/feed-state-hooks/useFollowing.ts (1 hunks)
packages/feeds-client/src/bindings/react/hooks/feed-state-hooks/useIsAggregatedActivityRead.ts (1 hunks)
packages/feeds-client/src/bindings/react/hooks/feed-state-hooks/useIsAggregatedActivitySeen.ts (1 hunks)
packages/feeds-client/src/bindings/react/hooks/feed-state-hooks/useNotificationStatus.ts (1 hunks)
packages/feeds-client/src/bindings/react/hooks/feed-state-hooks/useOwnCapabilities.ts (1 hunks)
packages/feeds-client/src/bindings/react/hooks/feed-state-hooks/useOwnFollows.ts (1 hunks)
packages/feeds-client/src/bindings/react/hooks/search-state-hooks/useSearchQuery.ts (1 hunks)
packages/feeds-client/src/bindings/react/hooks/search-state-hooks/useSearchResult.ts (1 hunks)
packages/feeds-client/src/bindings/react/hooks/search-state-hooks/useSearchSources.ts (1 hunks)
packages/feeds-client/src/bindings/react/hooks/useCreateFeedsClient.ts (1 hunks)
packages/feeds-client/src/bindings/react/wrappers/StreamFeed.tsx (1 hunks)
packages/feeds-client/src/bindings/react/wrappers/StreamSearch.tsx (1 hunks)
packages/feeds-client/src/bindings/react/wrappers/StreamSearchResults.tsx (1 hunks)
packages/feeds-client/src/common/real-time/event-models.ts (1 hunks)
packages/feeds-client/src/feed/event-handlers/activity/handle-activity-feedback.ts (1 hunks)
packages/feeds-client/src/feed/event-handlers/comment/utils/update-comment-count.ts (1 hunks)
packages/feeds-client/src/feeds-client/feeds-client.ts (4 hunks)
packages/feeds-client/src/utils/throttling/throttled-get-batched-own-capabilities.ts (1 hunks)
packages/feeds-client/tsconfig.json (1 hunks)
packages/feeds-client/tsconfig.lib.json (1 hunks)
packages/feeds-client/tsconfig.node.json (1 hunks)
packages/feeds-client/tsconfig.test.json (1 hunks)
packages/feeds-client/vite.config.ts (2 hunks)
packages/react-native-sdk/package.json (1 hunks)
packages/react-native-sdk/tsconfig.json (1 hunks)
packages/react-sdk/README.md (1 hunks)
packages/react-sdk/package.json (1 hunks)
packages/react-sdk/tsconfig.json (1 hunks)
sample-apps/react-native/ExpoTikTokApp/package.json (2 hunks)
sample-apps/react-sample-app/package.json (1 hunks)
sample-apps/react-tutorial/package.json (1 hunks)
sample-apps/react-tutorial/src/main.tsx (1 hunks)
sample-apps/react-tutorial/src/own-feeds-context.tsx (1 hunks)
sample-apps/react-tutorial/src/pages/Profile.tsx (1 hunks)

🧰 Additional context used

📓 Path-based instructions (2)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

Use TypeScript for all code in this repository

Files:

sample-apps/react-tutorial/src/main.tsx
packages/feeds-client/src/bindings/react/contexts/StreamSearchResultsContext.tsx
packages/feeds-client/src/bindings/react/hooks/feed-state-hooks/useFollowers.ts
packages/feeds-client/src/feed/event-handlers/activity/handle-activity-feedback.ts
packages/feeds-client/src/bindings/react/hooks/client-state-hooks/useClientConnectedUser.ts
packages/feeds-client/src/bindings/react/hooks/feed-state-hooks/useIsAggregatedActivitySeen.ts
packages/feeds-client/src/bindings/react/hooks/feed-state-hooks/useFollowing.ts
packages/feeds-client/src/bindings/react/hooks/feed-state-hooks/useOwnFollows.ts
packages/feeds-client/src/activity-with-state-updates/activity-with-state-updates.ts
packages/feeds-client/src/bindings/react/wrappers/StreamFeed.tsx
packages/feeds-client/src/bindings/react/hooks/feed-state-hooks/useFeedMetadata.ts
packages/feeds-client/src/feed/event-handlers/comment/utils/update-comment-count.ts
packages/feeds-client/src/utils/throttling/throttled-get-batched-own-capabilities.ts
packages/feeds-client/src/bindings/react/hooks/search-state-hooks/useSearchQuery.ts
packages/feeds-client/src/bindings/react/hooks/feed-state-hooks/useNotificationStatus.ts
packages/feeds-client/src/bindings/react/contexts/StreamFeedContext.tsx
packages/feeds-client/src/bindings/react/hooks/feed-state-hooks/useFeedActivities.ts
sample-apps/react-tutorial/src/pages/Profile.tsx
packages/feeds-client/src/common/real-time/event-models.ts
packages/feeds-client/src/bindings/react/contexts/StreamSearchContext.tsx
packages/feeds-client/src/bindings/react/hooks/search-state-hooks/useSearchResult.ts
packages/feeds-client/src/bindings/react/hooks/feed-state-hooks/useActivityComments.ts
packages/feeds-client/src/bindings/react/hooks/feed-state-hooks/useOwnCapabilities.ts
sample-apps/react-tutorial/src/own-feeds-context.tsx
packages/feeds-client/src/bindings/react/hooks/feed-state-hooks/useIsAggregatedActivityRead.ts
packages/feeds-client/src/bindings/react/hooks/feed-state-hooks/useComments.ts
packages/feeds-client/src/bindings/react/hooks/feed-state-hooks/useAggregatedActivities.ts
packages/feeds-client/src/bindings/react/hooks/search-state-hooks/useSearchSources.ts
packages/feeds-client/src/bindings/react/contexts/StreamFeedsContext.tsx
packages/feeds-client/src/bindings/react/hooks/client-state-hooks/useWsConnectionState.ts
packages/feeds-client/src/bindings/react/hooks/useCreateFeedsClient.ts
packages/feeds-client/src/feeds-client/feeds-client.ts
packages/feeds-client/src/bindings/react/wrappers/StreamSearchResults.tsx
packages/feeds-client/vite.config.ts
packages/feeds-client/src/bindings/react/wrappers/StreamSearch.tsx

**/package.json

📄 CodeRabbit inference engine (AGENTS.md)

Ensure packages work in both CommonJS and ES modules; validate yarn workspaces integration

Files:

sample-apps/react-native/ExpoTikTokApp/package.json
packages/react-sdk/package.json
packages/react-native-sdk/package.json
package.json
sample-apps/react-tutorial/package.json
sample-apps/react-sample-app/package.json
packages/feeds-client/package.json

🧠 Learnings (8)

📓 Common learnings

Learnt from: CR
Repo: GetStream/stream-feeds-js PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-17T11:01:52.844Z
Learning: Applies to packages/react-bindings/**/*.{ts,tsx} : Support React 18+ and React Native 0.73+ in respective SDKs (react-sdk/ and react-native-sdk/)

Learnt from: CR
Repo: GetStream/stream-feeds-js PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-17T11:01:52.844Z
Learning: Prioritize backwards compatibility, API stability, and high test coverage when changing code in this TypeScript Feeds SDK repository

Learnt from: CR
Repo: GetStream/stream-feeds-js PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-17T11:01:52.844Z
Learning: Applies to **/*.test.ts : Add and extend tests with .test.ts suffix, covering FeedsClient, Feed classes, event handlers, state management, React hooks, contexts, utility functions, generated API clients, and integration tests in __integration-tests__/ directories

Learnt from: CR
Repo: GetStream/stream-feeds-js PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-17T11:01:52.844Z
Learning: Applies to **/package.json : Ensure packages work in both CommonJS and ES modules; validate yarn workspaces integration