diff --git a/packages/vite/src/node/optimizer/index.ts b/packages/vite/src/node/optimizer/index.ts
index 37294aea459c15..f8b28bd9882f43 100644
--- a/packages/vite/src/node/optimizer/index.ts
+++ b/packages/vite/src/node/optimizer/index.ts
@@ -412,11 +412,15 @@ export async function runOptimizeDeps(
       try {
         exportsData = parse(entryContent) as ExportsData
       } catch {
+        const loader =
+          (esbuildOptions.loader &&
+            esbuildOptions.loader[path.extname(filePath)]) ||
+          'jsx'
         debug(
-          `Unable to parse dependency: ${id}. Trying again with a JSX transform.`
+          `Unable to parse dependency: ${id}. Trying again with a ${loader} transform.`
         )
         const transformed = await transformWithEsbuild(entryContent, filePath, {
-          loader: 'jsx'
+          loader
         })
         // Ensure that optimization won't fail by defaulting '.js' to the JSX parser.
         // This is useful for packages such as Gatsby.
diff --git a/packages/vite/src/node/optimizer/scan.ts b/packages/vite/src/node/optimizer/scan.ts
index e940617386eb35..cf566fe5ad6420 100644
--- a/packages/vite/src/node/optimizer/scan.ts
+++ b/packages/vite/src/node/optimizer/scan.ts
@@ -476,8 +476,9 @@ function esbuildScanPlugin(
             contents
           }))
         }
+        const { loader } = config.optimizeDeps?.esbuildOptions ?? {}
         return {
-          loader: ext as Loader,
+          loader: ((loader && loader[`.${ext}`]) || ext) as Loader,
           contents
         }
       })