From c39461c2ec46ff8d9e6dc88c7d932a7b13027ebc Mon Sep 17 00:00:00 2001
From: Oluwatobi Sofela <oluwatobiss@codesweetly.com>
Date: Mon, 26 Jan 2026 16:09:24 +0100
Subject: [PATCH] fix: Make esm build emit imports with extensions

---
 src/YouTubePlaylist.tsx      | 7 ++++---
 src/getPlaylistData.ts       | 6 +++---
 src/youTubePlaylistStyles.ts | 4 ++--
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/YouTubePlaylist.tsx b/src/YouTubePlaylist.tsx
index e847148..9a1eeec 100644
--- a/src/YouTubePlaylist.tsx
+++ b/src/YouTubePlaylist.tsx
@@ -1,10 +1,11 @@
 import { ReactElement, useRef, useEffect, useState } from "react";
+// .js(x) extensions are required for ESM build import resolution
 import {
   YouTubePlaylistPropsType,
   PlaylistData,
-} from "./YouTubePlaylist.types";
-import { youTubePlaylistStyles } from "./youTubePlaylistStyles";
-import getPlaylistData from "./getPlaylistData";
+} from "./YouTubePlaylist.types.jsx";
+import { youTubePlaylistStyles } from "./youTubePlaylistStyles.js";
+import getPlaylistData from "./getPlaylistData.js";
 
 export function YouTubePlaylist({
   apiKey,
diff --git a/src/getPlaylistData.ts b/src/getPlaylistData.ts
index 3801317..e8c8cd1 100644
--- a/src/getPlaylistData.ts
+++ b/src/getPlaylistData.ts
@@ -1,9 +1,9 @@
-import { FetchedData, PlaylistDataItem } from "./getPlaylistData.types";
+import { FetchedData, PlaylistDataItem } from "./getPlaylistData.types.js"; // .js extension is required for ESM build import resolution
 
 async function getPlaylistData(
   apiKey: string,
   playlistId: string,
-  currNextPageToken?: string
+  currNextPageToken?: string,
 ) {
   const youtubePlaylistItemsRequestEndPoint =
     "https://www.googleapis.com/youtube/v3/playlistItems";
@@ -11,7 +11,7 @@ async function getPlaylistData(
   const fetchedPlaylist = await fetch(
     `${youtubePlaylistItemsRequestEndPoint}?part=snippet&playlistId=${playlistId}&maxResults=50${
       currNextPageToken ? `&pageToken=${currNextPageToken}` : ""
-    }&key=${apiKey}`
+    }&key=${apiKey}`,
   );
 
   const data: FetchedData = await fetchedPlaylist.json();
diff --git a/src/youTubePlaylistStyles.ts b/src/youTubePlaylistStyles.ts
index b5f32fa..a72c009 100644
--- a/src/youTubePlaylistStyles.ts
+++ b/src/youTubePlaylistStyles.ts
@@ -1,9 +1,9 @@
-import { YouTubePlaylistStylesType } from "./YouTubePlaylist.types";
+import { YouTubePlaylistStylesType } from "./YouTubePlaylist.types.jsx"; // .jsx extension is required for ESM build import resolution
 
 export function youTubePlaylistStyles(
   columnCount?: string | number,
   columnWidth?: string | number,
-  gapSize?: number
+  gapSize?: number,
 ): YouTubePlaylistStylesType {
   const loaderContainerStyle: React.CSSProperties = {
     display: "flex",