Upgrade to React 19, Storybook 8, and Node 22 (#1291)

* chore: upgrade to React 19, Storybook 8, Node 22, and fix LoginForm state

* bug fixes

* login bug fix

* fix: improve variable names in LoginForm and relax Node version check

* ci: upgrade Node.js from 16/18 to 22 in all workflows

* style: fix Prettier formatting in react package

* fix(e2e): bind Vite to 127.0.0.1 to fix Playwright webServer timeout in CI

* fix: use semver package for Node version check

* chore: add semver as root devDependency

* chore: update lockfile

* fix(docs): pin webpack to 5.96.1 and update Node/React versions in READMEs

Author: Aryan-Verma-999

.github/workflows/build-and-lint.yml

@@ -17,12 +17,12 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 16.19.0
+          node-version: 22
 
       - name: Set up Yarn
         uses: actions/setup-node@v4
         with:
-          node-version: 16.19.0
+          node-version: 22
           cache: "yarn"
 
       - name: Cache dependencies

.github/workflows/build-pr.yml

@@ -25,7 +25,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: "16.19.0"
+          node-version: "22"
 
       - name: Install Dependencies
         run: yarn install
@@ -36,7 +36,7 @@ jobs:
       - name: Setup Node.js for Docs
         uses: actions/setup-node@v4
         with:
-          node-version: "18.x"
+          node-version: "22"
 
       - name: "Install dependencies for docs"
         run: yarn install

.github/workflows/deploy.yml

@@ -27,7 +27,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: "16.19.0"
+          node-version: "22"
 
       - name: Install Dependencies
         run: yarn install
@@ -38,7 +38,7 @@ jobs:
       - name: Setup Node.js for Docs
         uses: actions/setup-node@v4
         with:
-          node-version: "18.x"
+          node-version: "22"
 
       - name: "Install dependencies for docs"
         run: yarn install

.github/workflows/playwright.yml

@@ -17,7 +17,7 @@ jobs:
       - name: Setup Node.js environment
         uses: actions/setup-node@v4
         with:
-          node-version: 16.19.0
+          node-version: 22
 
       - name: Cache dependencies
         uses: actions/cache@v4

.nvmrc

@@ -1 +1 @@
-v16.19.0
+v22.16.0

README.md

@@ -37,7 +37,7 @@ Ensure that the "Enable CORS" option is turned on in your Rocket.Chat server. Yo
 
 #### Prerequisites
 
-- **Node.js**: Version 16.19.0 is required. Use [Node Version Manager (NVM)](https://github.com/nvm-sh/nvm) for easy switching between Node.js versions.
+- **Node.js**: Version 22 (LTS) is required. Use [Node Version Manager (NVM)](https://github.com/nvm-sh/nvm) for easy switching between Node.js versions.
 
   To install and use the correct Node.js version, execute the following commands with the specific version number:
 

package.json

@@ -22,10 +22,15 @@
     "esbuild": "^0.17.19",
     "husky": "^9.0.11",
     "lerna": "^6.6.2",
+    "semver": "^7.6.0",
     "typescript": "^5.1.3"
   },
   "dependencies": {
     "dompurify": "^3.1.6",
     "validator": "^13.15.15"
+  },
+  "resolutions": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   }
 }

packages/api/src/EmbeddedChatApi.ts

@@ -20,6 +20,7 @@ export default class EmbeddedChatApi {
   onUiInteractionCallbacks: ((data: any) => void)[];
   typingUsers: string[];
   auth: RocketChatAuth;
+  private _connectPromise: Promise<void> | null = null;
 
   constructor(
     host: string,
@@ -186,6 +187,17 @@ export default class EmbeddedChatApi {
    * TODO: Add logic to call thread message event listeners. To be done after thread implementation
    */
   async connect() {
+    // Guard against concurrent connect() calls (e.g. React StrictMode double-invoke)
+    if (this._connectPromise) {
+      return this._connectPromise;
+    }
+    this._connectPromise = this._doConnect().finally(() => {
+      this._connectPromise = null;
+    });
+    return this._connectPromise;
+  }
+
+  private async _doConnect() {
     try {
       await this.close(); // before connection, all previous subscriptions should be cancelled
       await this.rcClient.connect({});
@@ -198,7 +210,6 @@ export default class EmbeddedChatApi {
         }
         const message = JSON.parse(JSON.stringify(data));
         if (message.ts?.$date) {
-          console.log(message.ts?.$date);
           message.ts = message.ts.$date;
         }
         if (!message.ts) {
@@ -683,14 +694,14 @@ export default class EmbeddedChatApi {
 
   async sendTypingStatus(username: string, typing: boolean) {
     try {
-      this.rcClient.methodCall(
+      await this.rcClient.methodCall(
         "stream-notify-room",
         `${this.rid}/user-activity`,
         username,
         typing ? ["user-typing"] : []
       );
     } catch (err) {
-      console.error(err);
+      // DDP typing indicator fails when connection is temporarily down — expected, safe to ignore
     }
   }
 

packages/auth/src/Api.ts

@@ -44,7 +44,8 @@ export class Api {
     if (!response.ok) {
       throw new ApiError(response, "Failed Api Request for " + endpoint);
     }
-    const jsonData = await response.json();
+    const text = await response.text();
+    const jsonData = text.length ? JSON.parse(text) : {};
     return { data: jsonData };
   }
 

packages/auth/src/RocketChatAuth.ts

@@ -36,7 +36,9 @@ class RocketChatAuth {
   async onAuthChange(callback: (user: object | null) => void) {
     this.authListeners.push(callback);
     const user = await this.getCurrentUser();
-    callback(user);
+    if (this.authListeners.includes(callback)) {
+      callback(user);
+    }
   }
 
   async removeAuthListener(callback: (user: object | null) => void) {
@@ -72,6 +74,7 @@ class RocketChatAuth {
       }
     );
     this.setUser(response.data);
+    this.notifyAuthListeners();
     return this.currentUser;
   }
 
@@ -92,6 +95,7 @@ class RocketChatAuth {
       credentials
     );
     this.setUser(response.data);
+    this.notifyAuthListeners();
     return this.currentUser;
   }
 
@@ -107,6 +111,7 @@ class RocketChatAuth {
       api: this.api,
     });
     this.setUser(response.data);
+    this.notifyAuthListeners();
     return this.currentUser;
   }
 
@@ -190,10 +195,10 @@ class RocketChatAuth {
     try {
       const token = await this.getToken();
       if (token) {
-        const user = await this.loginWithResumeToken(token); // will notifyAuthListeners on successful login
+        const user = await this.loginWithResumeToken(token);
         if (user) {
           this.lastFetched = new Date();
-          await this.getCurrentUser(); // refresh the token if needed
+          await this.getCurrentUser();
         }
       }
     } catch (e) {