fix(i18n): use .js extensions on dayjs subpath imports for valid Node ESM

.github/workflows/ci.yml

@@ -36,6 +36,9 @@ jobs:
       - name: Validate CJS bundle with Node ${{ env.NODE_VERSION }}
         run: yarn validate-cjs
 
+      - name: Validate ESM bundle with Node ${{ env.NODE_VERSION }}
+        run: yarn validate-esm
+
       - name: Validate translations
         run: yarn validate-translations
 

.yarnrc.yml

@@ -1,7 +1,5 @@
 enableGlobalCache: true
 
-enableHardenedMode: true
-
 enableScripts: false
 
 enableTelemetry: false
@@ -12,10 +10,11 @@ nmMode: hardlinks-global
 
 nodeLinker: node-modules
 
-npmMinimalAgeGate: 3d
+npmMinimalAgeGate: 1d
 
 npmPreapprovedPackages:
   - stream-chat
+  - vite
 
 npmPublishProvenance: true
 

examples/tutorial/package.json

@@ -22,8 +22,8 @@
   "devDependencies": {
     "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^6.0.2",
+    "@vitejs/plugin-react": "^6.0.3",
     "typescript": "^6.0.3",
-    "vite": "^8.0.14"
+    "vite": "^8.1.3"
   }
 }

examples/vite/package.json

@@ -24,12 +24,12 @@
     "@playwright/test": "^1.60.0",
     "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^6.0.2",
+    "@vitejs/plugin-react": "^6.0.3",
     "@vitejs/plugin-react-swc": "^4.3.1",
     "babel-plugin-react-compiler": "^1.0.0",
     "sass": "^1.100.0",
     "typescript": "^6.0.3",
-    "vite": "^8.0.14",
+    "vite": "^8.1.3",
     "vite-plugin-babel": "^1.7.3"
   }
 }

package.json

@@ -160,8 +160,8 @@
     "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",
     "@types/use-sync-external-store": "^1.5.0",
-    "@vitest/coverage-v8": "^4.1.7",
-    "@vitest/eslint-plugin": "^1.6.18",
+    "@vitest/coverage-v8": "^4.1.9",
+    "@vitest/eslint-plugin": "^1.6.20",
     "concurrently": "^9.2.1",
     "conventional-changelog-conventionalcommits": "^9.3.1",
     "emoji-mart": "^5.6.0",
@@ -184,8 +184,8 @@
     "stream-chat": "^9.49.0",
     "typescript": "^6.0.3",
     "typescript-eslint": "^8.59.4",
-    "vite": "^8.0.14",
-    "vitest": "^4.1.7",
+    "vite": "^8.1.3",
+    "vitest": "^4.1.9",
     "vitest-axe": "^0.1.0"
   },
   "scripts": {
@@ -212,6 +212,7 @@
     "types:tests": "tsc --project tsconfig.test.json --noEmit",
     "validate-translations": "node scripts/validate-translations.js",
     "validate-cjs": "concurrently 'node scripts/validate-cjs-node-bundle.cjs' 'node scripts/validate-cjs-browser-bundle.cjs'",
+    "validate-esm": "node scripts/validate-esm-node-bundle.mjs",
     "semantic-release": "semantic-release",
     "prepack": "yarn build",
     "examples:build": "yarn workspaces foreach -A --include '@stream-io/stream-chat-react-*' run build",

scripts/validate-esm-node-bundle.mjs

@@ -0,0 +1,11 @@
+// ESM counterpart to validate-cjs-node-bundle.cjs.
+//
+// Node's native ESM loader is stricter than any bundler: it requires file
+// extensions on subpath imports of dependencies that ship no "exports" map
+// (e.g. `dayjs/plugin/calendar` must be written as `dayjs/plugin/calendar.js`).
+// Such specifiers resolve fine through Turbopack/Webpack/Vite but throw
+// ERR_MODULE_NOT_FOUND under Node — the same path Next.js takes when it loads
+// this package as a server external. Importing the built ESM bundle here catches
+// that class of breakage before it ships.
+
+import '../dist/es/index.mjs';

src/context/TranslationContext.tsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import Dayjs from 'dayjs';
-import calendar from 'dayjs/plugin/calendar';
-import localizedFormat from 'dayjs/plugin/localizedFormat';
+import calendar from 'dayjs/plugin/calendar.js';
+import localizedFormat from 'dayjs/plugin/localizedFormat.js';
 import type { PropsWithChildren } from 'react';
 import type { TFunction } from 'i18next';
 import type { TranslationLanguages } from 'stream-chat';

src/i18n/Streami18n.ts

@@ -1,13 +1,13 @@
 import i18n from 'i18next';
 import Dayjs from 'dayjs';
-import calendar from 'dayjs/plugin/calendar';
-import updateLocale from 'dayjs/plugin/updateLocale';
-import LocalizedFormat from 'dayjs/plugin/localizedFormat';
-import localeData from 'dayjs/plugin/localeData';
-import relativeTime from 'dayjs/plugin/relativeTime';
-import duration from 'dayjs/plugin/duration';
-import utc from 'dayjs/plugin/utc';
-import timezone from 'dayjs/plugin/timezone';
+import calendar from 'dayjs/plugin/calendar.js';
+import updateLocale from 'dayjs/plugin/updateLocale.js';
+import LocalizedFormat from 'dayjs/plugin/localizedFormat.js';
+import localeData from 'dayjs/plugin/localeData.js';
+import relativeTime from 'dayjs/plugin/relativeTime.js';
+import duration from 'dayjs/plugin/duration.js';
+import utc from 'dayjs/plugin/utc.js';
+import timezone from 'dayjs/plugin/timezone.js';
 import { NotificationTranslationTopic, TranslationBuilder } from './TranslationBuilder';
 import { defaultTranslatorFunction, predefinedFormatters } from './utils';
 
@@ -34,21 +34,21 @@ import {
   trTranslations,
 } from './translations';
 
-import 'dayjs/locale/de';
-import 'dayjs/locale/es';
-import 'dayjs/locale/fr';
-import 'dayjs/locale/hi';
-import 'dayjs/locale/it';
-import 'dayjs/locale/ja';
-import 'dayjs/locale/ko';
-import 'dayjs/locale/nl';
-import 'dayjs/locale/pt';
-import 'dayjs/locale/ru';
-import 'dayjs/locale/tr';
+import 'dayjs/locale/de.js';
+import 'dayjs/locale/es.js';
+import 'dayjs/locale/fr.js';
+import 'dayjs/locale/hi.js';
+import 'dayjs/locale/it.js';
+import 'dayjs/locale/ja.js';
+import 'dayjs/locale/ko.js';
+import 'dayjs/locale/nl.js';
+import 'dayjs/locale/pt.js';
+import 'dayjs/locale/ru.js';
+import 'dayjs/locale/tr.js';
 // These locale imports also set these locale globally.
 // So As a last step I am going to import english locale
 // to make sure I don't mess up language at other places in app.
-import 'dayjs/locale/en';
+import 'dayjs/locale/en.js';
 
 const defaultNS = 'translation';
 const defaultLng = 'en';
@@ -407,10 +407,8 @@ export type Streami18nOptions = {
  * ```js
  * import Dayjs from 'dayjs'
  *
- * import 'dayjs/locale/nl';
- * import 'dayjs/locale/it';
- * // or if you want to include all locales
- * import 'dayjs/min/locales';
+ * import 'dayjs/locale/nl.js';
+ * import 'dayjs/locale/it.js';
  *
  * const i18n = new Streami18n({
  *  language: 'nl',
@@ -745,7 +743,7 @@ export class Streami18n {
       this.logger(
         `Streami18n: registerTranslation(language, translation, customDayjsLocale) - ` +
           `Locale config for ${language} does not exist in Dayjs.` +
-          `Please import the locale file using "import 'dayjs/locale/${language}';" in your app or ` +
+          `Please import the locale file using "import 'dayjs/locale/${language}.js';" in your app or ` +
           `register the locale config with Streami18n using registerTranslation(language, translation, customDayjsLocale)`,
       );
     }

src/i18n/types.ts

@@ -50,7 +50,7 @@ export type TimestampFormatterOptions = {
 
 /**
  * import dayjs from 'dayjs';
- * import duration from 'dayjs/plugin/duration';
+ * import duration from 'dayjs/plugin/duration.js';
  *
  * dayjs.extend(duration);
  *

src/i18n/utils.ts

@@ -1,5 +1,5 @@
 import Dayjs from 'dayjs';
-import type { Duration as DayjsDuration } from 'dayjs/plugin/duration';
+import type { Duration as DayjsDuration } from 'dayjs/plugin/duration.js';
 
 import type { TFunction } from 'i18next';
 import type { Moment } from 'moment-timezone';