diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json
index d61b6099e589..91d72fc74027 100644
--- a/code/addons/docs/package.json
+++ b/code/addons/docs/package.json
@@ -50,7 +50,6 @@
   },
   "dependencies": {
     "@babel/plugin-transform-react-jsx": "^7.12.12",
-    "@babel/preset-env": "^7.12.11",
     "@jest/transform": "^26.6.2",
     "@mdx-js/react": "^1.6.22",
     "@storybook/addons": "7.0.0-alpha.38",
@@ -69,11 +68,9 @@
     "@storybook/source-loader": "7.0.0-alpha.38",
     "@storybook/store": "7.0.0-alpha.38",
     "@storybook/theming": "7.0.0-alpha.38",
-    "babel-loader": "^8.2.5",
     "dequal": "^2.0.2",
     "fs-extra": "^9.0.1",
     "global": "^4.4.0",
-    "lodash": "^4.17.21",
     "remark-external-links": "^8.0.0",
     "remark-slug": "^6.0.0",
     "ts-dedent": "^2.0.0",
diff --git a/code/addons/docs/src/preset.ts b/code/addons/docs/src/preset.ts
index b824eadabc2b..63eb97d0269a 100644
--- a/code/addons/docs/src/preset.ts
+++ b/code/addons/docs/src/preset.ts
@@ -48,7 +48,7 @@ export async function webpack(
       typeof createCompiler
     >[0] */
 ) {
-  const resolvedBabelLoader = require.resolve('babel-loader');
+  const resolvedBabelLoader = await options.presets.apply('babelLoaderRef');
 
   const { module = {} } = webpackConfig;
 
diff --git a/code/lib/builder-webpack5/src/presets/preview-preset.ts b/code/lib/builder-webpack5/src/presets/preview-preset.ts
index eb608d16687c..4d8daace20ad 100644
--- a/code/lib/builder-webpack5/src/presets/preview-preset.ts
+++ b/code/lib/builder-webpack5/src/presets/preview-preset.ts
@@ -28,3 +28,5 @@ export const babel = async (config: any, options: any) => ({
     },
   ],
 });
+
+export const babelLoaderRef = () => require.resolve('babel-loader');
diff --git a/code/renderers/vue/package.json b/code/renderers/vue/package.json
index f380102bbedf..08e691a6417b 100644
--- a/code/renderers/vue/package.json
+++ b/code/renderers/vue/package.json
@@ -71,6 +71,11 @@
     "css-loader": "*",
     "vue": "^2.6.8"
   },
+  "peerDependenciesMeta": {
+    "babel-loader": {
+      "optional": true
+    }
+  },
   "engines": {
     "node": ">=10.13.0"
   },
diff --git a/code/renderers/vue3/package.json b/code/renderers/vue3/package.json
index 35a994606bae..c6f507782025 100644
--- a/code/renderers/vue3/package.json
+++ b/code/renderers/vue3/package.json
@@ -70,6 +70,11 @@
     "babel-loader": "^7.0.0 || ^8.0.0",
     "vue": "^3.0.0"
   },
+  "peerDependenciesMeta": {
+    "babel-loader": {
+      "optional": true
+    }
+  },
   "engines": {
     "node": ">=10.13.0"
   },
diff --git a/code/yarn.lock b/code/yarn.lock
index ea27a6bc988f..b38f79d81262 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -6457,7 +6457,6 @@ __metadata:
   dependencies:
     "@babel/core": ^7.12.10
     "@babel/plugin-transform-react-jsx": ^7.12.12
-    "@babel/preset-env": ^7.12.11
     "@jest/transform": ^26.6.2
     "@mdx-js/react": ^1.6.22
     "@storybook/addons": 7.0.0-alpha.38
@@ -6478,11 +6477,9 @@ __metadata:
     "@storybook/store": 7.0.0-alpha.38
     "@storybook/theming": 7.0.0-alpha.38
     "@types/util-deprecate": ^1.0.0
-    babel-loader: ^8.2.5
     dequal: ^2.0.2
     fs-extra: ^9.0.1
     global: ^4.4.0
-    lodash: ^4.17.21
     remark-external-links: ^8.0.0
     remark-slug: ^6.0.0
     ts-dedent: ^2.0.0
@@ -8968,6 +8965,9 @@ __metadata:
     "@babel/core": "*"
     babel-loader: ^7.0.0 || ^8.0.0
     vue: ^3.0.0
+  peerDependenciesMeta:
+    babel-loader:
+      optional: true
   languageName: unknown
   linkType: soft
 
@@ -8992,6 +8992,9 @@ __metadata:
     babel-loader: ^7.0.0 || ^8.0.0
     css-loader: "*"
     vue: ^2.6.8
+  peerDependenciesMeta:
+    babel-loader:
+      optional: true
   languageName: unknown
   linkType: soft