diff --git a/packages/ui5-tooling-transpile/lib/util.js b/packages/ui5-tooling-transpile/lib/util.js
index 5f56802d7..d77562ee7 100644
--- a/packages/ui5-tooling-transpile/lib/util.js
+++ b/packages/ui5-tooling-transpile/lib/util.js
@@ -63,9 +63,11 @@ async function loadBabelConfigOptions(babelConfigOptions, skipBabelPresetPluginR
 	const partialConfig = await babel.loadPartialConfigAsync(
 		Object.assign(
 			{
+				cwd,
 				configFile: false,
 				babelrc: false,
-				filename: "src/dummy.js" // necessary for ignore/include/exclude
+				filename: "src/dummy.js", // necessary for ignore/include/exclude
+				envName: process.env.BABEL_ENV || process.env.NODE_ENV || "development"
 			},
 			babelConfigOptions
 		)
@@ -112,9 +114,17 @@ async function findBabelConfigOptions(cwd) {
 	} else if (configFile) {
 		// for a babel config file we load it on our own to normalize the plugin/preset paths
 		// => no recursive merging of babel config is possible with this approach
-		babelConfigOptions = JSONC.parse(fs.readFileSync(configFile, { encoding: "utf8" }));
-		// let Babel lookup the configuration file with the Babel API
-		//partialConfig = await loadBabelConfigOptions({ configFile, filename: dir, babelrc: true });
+		try {
+			babelConfigOptions = JSONC.parse(fs.readFileSync(configFile, { encoding: "utf8" }));
+		} catch (err) {
+			// no JSON so we let Babel lookup the configuration file with the Babel API
+			const partialConfig = await babel.loadPartialConfigAsync({ cwd });
+			// but we only extract the presets and plugins and ignore the other properties
+			babelConfigOptions = {
+				plugins: partialConfig?.options?.plugins,
+				presets: partialConfig?.options?.presets
+			};
+		}
 	}
 
 	return babelConfigOptions ? { configFile, babelConfigOptions } : undefined;
diff --git a/packages/ui5-tooling-transpile/test/__assets__/external-js/.babelrc b/packages/ui5-tooling-transpile/test/__assets__/external-js/.babelrc
new file mode 100644
index 000000000..549d22689
--- /dev/null
+++ b/packages/ui5-tooling-transpile/test/__assets__/external-js/.babelrc
@@ -0,0 +1,5 @@
+{
+	// comments are allowed
+	"presets": ["transform-ui5", "@babel/preset-typescript", "@babel/preset-env"],
+	"sourceMaps": true
+}
diff --git a/packages/ui5-tooling-transpile/test/__assets__/external-js/.browserslistrc b/packages/ui5-tooling-transpile/test/__assets__/external-js/.browserslistrc
new file mode 100644
index 000000000..041f53a49
--- /dev/null
+++ b/packages/ui5-tooling-transpile/test/__assets__/external-js/.browserslistrc
@@ -0,0 +1 @@
+>0.5% and not dead
\ No newline at end of file
diff --git a/packages/ui5-tooling-transpile/test/__assets__/external-js/babel.config.js b/packages/ui5-tooling-transpile/test/__assets__/external-js/babel.config.js
new file mode 100644
index 000000000..c05e048d5
--- /dev/null
+++ b/packages/ui5-tooling-transpile/test/__assets__/external-js/babel.config.js
@@ -0,0 +1,18 @@
+module.exports = function (api) {
+	api.cache(true);
+
+	const presets = ["transform-ui5", "@babel/preset-typescript", "@babel/preset-env"];
+	const plugins = [
+		[
+			"transform-async-to-promises",
+			{
+				inlineHelpers: true
+			}
+		]
+	];
+
+	return {
+		presets,
+		plugins
+	};
+};
diff --git a/packages/ui5-tooling-transpile/test/util.test.js b/packages/ui5-tooling-transpile/test/util.test.js
index 8c93fda71..2225e179a 100644
--- a/packages/ui5-tooling-transpile/test/util.test.js
+++ b/packages/ui5-tooling-transpile/test/util.test.js
@@ -71,6 +71,27 @@ test("usage of external babel config", async (t) => {
 		cwd
 	);
 	t.true(config !== undefined);
+	t.deepEqual(config.presets[0].file.request, "transform-ui5");
+	t.deepEqual(config.presets[1].file.request, "@babel/preset-typescript");
+	t.deepEqual(config.presets[2].file.request, "@babel/preset-env");
+});
+
+test("usage of external js babel config", async (t) => {
+	const cwd = path.join(__dirname, "__assets__/external-js");
+	const config = await t.context.util.createBabelConfig(
+		{
+			configuration: {
+				debug: true,
+				skipBabelPresetPluginResolve: true
+			}
+		},
+		cwd
+	);
+	t.true(config !== undefined);
+	t.deepEqual(config.presets[0].file.request, "transform-ui5");
+	t.deepEqual(config.presets[1].file.request, "@babel/preset-typescript");
+	t.deepEqual(config.presets[2].file.request, "@babel/preset-env");
+	t.deepEqual(config.plugins[0].file.request, "transform-async-to-promises");
 });
 
 test("inject configuration options", async (t) => {