diff --git a/packages/vite/src/node/optimizer/index.ts b/packages/vite/src/node/optimizer/index.ts
index 6102e832841a89..f40802acb39039 100644
--- a/packages/vite/src/node/optimizer/index.ts
+++ b/packages/vite/src/node/optimizer/index.ts
@@ -253,7 +253,9 @@ export async function optimizeDeps(
         `Unable to parse dependency: ${id}. Trying again with a JSX transform.`
       )
       const transformed = await transformWithEsbuild(entryContent, filePath, {
-        loader: 'jsx'
+        loader: esbuildOptions.loader
+          ? esbuildOptions.loader[path.extname(filePath)]
+          : 'jsx'
       })
       // Ensure that optimization won't fail by defaulting '.js' to the JSX parser.
       // This is useful for packages such as Gatsby.