From 5caa2fcd9347d4589dc4a18d4610038daa4cc165 Mon Sep 17 00:00:00 2001
From: Oluwatobi Sofela <oluwatobiss@codesweetly.com>
Date: Sun, 25 Jan 2026 18:17:41 +0100
Subject: [PATCH] fix: Make esm build emit imports with extensions

---
 jest.config.cjs           | 4 ++++
 src/ImageGallery.tsx      | 7 +++++--
 src/ImageGalleryStyles.ts | 4 ++--
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/jest.config.cjs b/jest.config.cjs
index 1b86565..f26de41 100644
--- a/jest.config.cjs
+++ b/jest.config.cjs
@@ -10,4 +10,8 @@ module.exports = {
       },
     ],
   },
+  // Resolve .js imports to .ts/.tsx files for testing (for example, ImageGalleryStyles.js -> ImageGalleryStyles.ts)
+  moduleNameMapper: {
+    "^(\\.{1,2}/.*)\\.js$": "$1",
+  },
 };
diff --git a/src/ImageGallery.tsx b/src/ImageGallery.tsx
index 5fef2e4..6d03e9f 100644
--- a/src/ImageGallery.tsx
+++ b/src/ImageGallery.tsx
@@ -1,7 +1,10 @@
 import { ReactElement, useRef, useState, useEffect } from "react";
 import { flushSync } from "react-dom";
-import { ImageGalleryPropsType, ImgSrcInfoType } from "./ImageGallery.types";
-import { imageGalleryStyles } from "./ImageGalleryStyles";
+import {
+  ImageGalleryPropsType,
+  ImgSrcInfoType,
+} from "./ImageGallery.types.jsx";
+import { imageGalleryStyles } from "./ImageGalleryStyles.js"; // .js extension is required for ESM build import resolution
 
 export function ImageGallery({
   imagesInfoArray,
diff --git a/src/ImageGalleryStyles.ts b/src/ImageGalleryStyles.ts
index 68cf880..b459c7e 100644
--- a/src/ImageGalleryStyles.ts
+++ b/src/ImageGalleryStyles.ts
@@ -1,10 +1,10 @@
-import { ImageGalleryStylesType } from "./ImageGallery.types";
+import { ImageGalleryStylesType } from "./ImageGallery.types.jsx"; // .jsx extension is required for ESM build import resolution
 
 export function imageGalleryStyles(
   columnCount?: string | number,
   columnWidth?: string | number,
   gapSize?: number,
-  fixedCaption?: boolean
+  fixedCaption?: boolean,
 ): ImageGalleryStylesType {
   const modalThumbnailSectionHeight = "20vh";
   const galleryContainerStyle: React.CSSProperties = {