fix: report correct package version in esm build (#2569)

Author: MartinCupela

package.json

@@ -263,7 +263,7 @@
   },
   "scripts": {
     "build": "rm -rf dist && yarn build-translations && yarn bundle",
-    "bundle": "concurrently tsc ./scripts/copy-css.sh ./scripts/bundle.mjs",
+    "bundle": "concurrently ./scripts/bundle-esm.mjs ./scripts/copy-css.sh scripts/bundle-cjs.mjs",
     "build-translations": "i18next",
     "coverage": "jest --collectCoverage && codecov",
     "eslint": "eslint '**/*.{js,md,ts,jsx,tsx}' --max-warnings 0",

scripts/bundle.mjs renamed to scripts/bundle-cjs.mjs

@@ -2,9 +2,9 @@
 
 import { dirname, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
-import { execSync } from 'node:child_process';
 import * as esbuild from 'esbuild';
 import { replace } from 'esbuild-plugin-replace';
+import getPackageVersion from "./getPackageVersion.mjs";
 
 // import.meta.dirname is not available before Node 20
 const __dirname = dirname(fileURLToPath(import.meta.url));
@@ -46,27 +46,6 @@ const cjsBundleConfig = {
   sourcemap: 'linked',
 };
 
-// Get the latest version so that magic string __STREAM_CHAT_REACT_VERSION__ can be replaced with it in the source code (used for reporting purposes)
-const getVersion = () => {
-    let version;
-    // During release, use the version being released
-    // see .releaserc.json where the `NEXT_VERSION` env variable is set
-    if (process.env.NEXT_VERSION) {
-        version = process.env.NEXT_VERSION;
-    } else {
-        // Otherwise use the latest git tag
-        try {
-            version = execSync('git describe --tags --abbrev=0').toString().trim();
-        } catch (error) {
-            console.error(error);
-            console.warn('Could not get latest version from git tags, falling back to package.json');
-            version = packageJson.default.version;
-        }
-    }
-    console.log(`Determined the build package version to be ${version}`);
-    return version;
-};
-
 
 // We build two CJS bundles: for browser and for node. The latter one can be
 // used e.g. during SSR (although it makes little sence to SSR chat, but still
@@ -78,7 +57,7 @@ const bundles = ['browser', 'node'].map((platform) =>
     platform,
     plugins: [
         replace({
-          '__STREAM_CHAT_REACT_VERSION__': getVersion(),
+          '__STREAM_CHAT_REACT_VERSION__': getPackageVersion(),
         }),
     ],
   }),

scripts/bundle-esm.mjs

@@ -0,0 +1,32 @@
+#!/usr/bin/env node
+
+import { exec } from 'node:child_process';
+import { readFile, writeFile } from 'node:fs/promises';
+import glob from 'glob';
+import { promisify } from 'node:util';
+import getPackageVersion from "./getPackageVersion.mjs";
+
+const execAsync = promisify(exec);
+
+const version = getPackageVersion();
+
+const bundleEsm = async () => {
+    // Run TypeScript compiler
+    console.log('Running TypeScript compiler...');
+    await execAsync('tsc');
+
+    // Replace version string in generated files
+    console.log('Replacing version strings...');
+    const files = glob.glob.sync('dist/**/*.js');
+    await Promise.all(
+        files.map(async (file) => {
+            const content = await readFile(file, 'utf8');
+            const newContent = content.replace(/__STREAM_CHAT_REACT_VERSION__/g, version);
+            await writeFile(file, newContent);
+        })
+    );
+
+    console.log('ESM build complete');
+};
+
+bundleEsm().catch(console.error);

scripts/getPackageVersion.mjs

@@ -0,0 +1,30 @@
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+// import.meta.dirname is not available before Node 20
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+const packageJson = await import(resolve(__dirname, '../package.json'), {
+    assert: { type: 'json' },
+});
+
+// Get the latest version so that magic string __STREAM_CHAT_REACT_VERSION__ can be replaced with it in the source code (used for reporting purposes)
+export default function getPackageVersion() {
+    let version;
+    // During release, use the version being released
+    // see .releaserc.json where the `NEXT_VERSION` env variable is set
+    if (process.env.NEXT_VERSION) {
+        version = process.env.NEXT_VERSION;
+    } else {
+        // Otherwise use the latest git tag
+        try {
+            version = execSync('git describe --tags --abbrev=0').toString().trim();
+        } catch (error) {
+            console.error(error);
+            console.warn('Could not get latest version from git tags, falling back to package.json');
+            version = packageJson.default.version;
+        }
+    }
+    console.log(`Determined the build package version to be ${version}`);
+    return version;
+};

src/components/Chat/hooks/useChat.ts

@@ -61,7 +61,7 @@ export const useChat = <
     const userAgent = client.getUserAgent();
     if (!userAgent.includes('stream-chat-react')) {
       // result looks like: 'stream-chat-react-2.3.2-stream-chat-javascript-client-browser-2.2.2'
-      // __STREAM_CHAT_REACT_VERSION__ is replaced during the build process with the current version
+      // the upper-case text between double underscores is replaced with the actual semantic version of the library
       client.setUserAgent(`stream-chat-react-__STREAM_CHAT_REACT_VERSION__-${userAgent}`);
     }