diff --git a/packages/babel-loader-8/index.js b/packages/babel-loader-8/index.js
new file mode 100644
index 0000000000..f534433178
--- /dev/null
+++ b/packages/babel-loader-8/index.js
@@ -0,0 +1,17 @@
+const { applyVariantToBabelConfig } = require('@embroider/core');
+module.exports = require('babel-loader').custom(babel => {
+  return {
+    customOptions({ variant, appBabelConfigPath, ...loader }) {
+      return {
+        custom: {
+          variant,
+          appBabelConfigPath,
+        },
+        loader: {
+          ...applyVariantToBabelConfig(variant, require(appBabelConfigPath)),
+          ...loader,
+        },
+      };
+    },
+  };
+});
diff --git a/packages/babel-loader-8/package.json b/packages/babel-loader-8/package.json
new file mode 100644
index 0000000000..259cb28e8a
--- /dev/null
+++ b/packages/babel-loader-8/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "@embroider/babel-loader-8",
+  "version": "0.42.1",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/embroider-build/embroider.git",
+    "directory": "packages/babel-loader-8"
+  },
+  "license": "MIT",
+  "main": "index.js",
+  "dependencies": {
+    "@babel/core": "^7.14.5",
+    "@embroider/core": "0.42.1",
+    "babel-loader": "8"
+  },
+  "engines": {
+    "node": "12.* || 14.* || >= 16"
+  },
+  "volta": {
+    "extends": "../../package.json"
+  }
+}
diff --git a/packages/webpack/package.json b/packages/webpack/package.json
index 611ce675eb..2cdaafd5cf 100644
--- a/packages/webpack/package.json
+++ b/packages/webpack/package.json
@@ -24,6 +24,7 @@
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.14.5",
     "@babel/plugin-proposal-optional-chaining": "^7.14.5",
     "@embroider/babel-loader-7": "0.42.1",
+    "@embroider/babel-loader-8": "0.42.1",
     "@embroider/hbs-loader": "0.42.1",
     "@types/loader-utils": "^2.0.2",
     "@types/source-map": "^0.5.7",
diff --git a/packages/webpack/src/ember-webpack.ts b/packages/webpack/src/ember-webpack.ts
index 81d562863a..358d62d390 100644
--- a/packages/webpack/src/ember-webpack.ts
+++ b/packages/webpack/src/ember-webpack.ts
@@ -207,7 +207,7 @@ const Webpack: PackagerConstructor<Options> = class Webpack implements Packager
           // not overriding the default loader resolution rules in case the app also
           // wants to control those.
           'thread-loader': require.resolve('thread-loader'),
-          'babel-loader-8': require.resolve('babel-loader'),
+          'babel-loader-8': require.resolve('@embroider/babel-loader-8'),
           'babel-loader-7': require.resolve('@embroider/babel-loader-7'),
           'css-loader': require.resolve('css-loader'),
           'style-loader': require.resolve('style-loader'),
@@ -542,8 +542,7 @@ function warmUp(extraOptions: object | false | undefined) {
 
   threadLoaderWarmup(Object.assign({}, threadLoaderOptions, extraOptions), [
     require.resolve('@embroider/hbs-loader'),
-    require.resolve('babel-loader'),
-    require.resolve('@embroider/babel-loader-7'),
+    require.resolve('@embroider/babel-loader-8'),
   ]);
 }
 
@@ -580,32 +579,39 @@ function babelLoaderOptions(
   appBabelConfigPath: string,
   extraOptions: BabelLoaderOptions | undefined
 ) {
-  let options = Object.assign(
-    {},
-    // eslint-disable-next-line @typescript-eslint/no-require-imports
-    applyVariantToBabelConfig(variant, require(appBabelConfigPath)),
-    {
-      cacheDirectory: getPackagerCacheDir('webpack-babel-loader'),
-    },
-    extraOptions
-  );
-  if (majorVersion === 7) {
-    if (options.plugins) {
-      options.plugins = options.plugins.slice();
-    } else {
-      options.plugins = [];
-    }
-    // webpack uses acorn and acorn doesn't parse these features yet, so we
-    // always tranpile them away regardless of what preset-env is doing
-    if (!options.plugins.some(pluginMatches(/@babel\/plugin-proposal-optional-chaining/))) {
-      options.plugins.push(require.resolve('@babel/plugin-proposal-optional-chaining'));
-    }
-    if (!options.plugins.some(pluginMatches(/@babel\/plugin-proposal-nullish-coalescing-operator/))) {
-      options.plugins.push(require.resolve('@babel/plugin-proposal-nullish-coalescing-operator'));
-    }
+  const cacheDirectory = getPackagerCacheDir('webpack-babel-loader');
+  if (majorVersion === 6) {
+    return {
+      loader: 'babel-loader-7',
+      options: {
+        // eslint-disable-next-line @typescript-eslint/no-require-imports
+        ...applyVariantToBabelConfig(variant, require(appBabelConfigPath)),
+        cacheDirectory,
+        ...extraOptions,
+      },
+    };
+  }
+  const options: { [key: string]: any } = {
+    variant,
+    appBabelConfigPath,
+    cacheDirectory,
+    ...extraOptions,
+  };
+  if (options.plugins) {
+    options.plugins = options.plugins.slice();
+  } else {
+    options.plugins = [];
+  }
+  // webpack uses acorn and acorn doesn't parse these features yet, so we
+  // always tranpile them away regardless of what preset-env is doing
+  if (!options.plugins.some(pluginMatches(/@babel\/plugin-proposal-optional-chaining/))) {
+    options.plugins.push(require.resolve('@babel/plugin-proposal-optional-chaining'));
+  }
+  if (!options.plugins.some(pluginMatches(/@babel\/plugin-proposal-nullish-coalescing-operator/))) {
+    options.plugins.push(require.resolve('@babel/plugin-proposal-nullish-coalescing-operator'));
   }
   return {
-    loader: majorVersion === 6 ? 'babel-loader-7' : 'babel-loader-8',
+    loader: 'babel-loader-8',
     options,
   };
 }
diff --git a/yarn.lock b/yarn.lock
index 5e9ef1eb6d..ce3e5f2e99 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3635,7 +3635,7 @@ babel-loader@7:
     loader-utils "^1.0.2"
     mkdirp "^0.5.1"
 
-babel-loader@^8.0.6, babel-loader@^8.2.2:
+babel-loader@8, babel-loader@^8.0.6, babel-loader@^8.2.2:
   version "8.2.2"
   resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.2.2.tgz#9363ce84c10c9a40e6c753748e1441b60c8a0b81"
   integrity sha512-JvTd0/D889PQBtUXJ2PXaKU/pjZDMtHA9V2ecm+eNRmmBCMR09a+fmpGTNwnJtFmFl5Ei7Vy47LjBb+L0wQ99g==