diff --git a/addons/docs/src/frameworks/common/preset.ts b/addons/docs/src/frameworks/common/preset.ts
index ddc33b629a04..8a62bbf5ad3b 100644
--- a/addons/docs/src/frameworks/common/preset.ts
+++ b/addons/docs/src/frameworks/common/preset.ts
@@ -5,6 +5,10 @@ import remarkExternalLinks from 'remark-external-links';
 // @ts-ignore
 import createCompiler from '../../mdx/mdx-compiler-plugin';
 
+const resolvedBabelLoader = require.resolve('babel-loader', {
+  paths: [require.resolve('@storybook/core')],
+});
+
 // for frameworks that are not working with react, we need to configure
 // the jsx to transpile mdx, for now there will be a flag for that
 // for more complex solutions we can find alone that we need to add '@babel/plugin-transform-react-jsx'
@@ -66,7 +70,7 @@ export function webpack(webpackConfig: any = {}, options: any = {}) {
         test: /\.md$/,
         use: [
           {
-            loader: require.resolve('babel-loader'),
+            loader: resolvedBabelLoader,
             options: createBabelOptions({ babelOptions, mdxBabelOptions, configureJSX }),
           },
           {
@@ -89,7 +93,7 @@ export function webpack(webpackConfig: any = {}, options: any = {}) {
           include: new RegExp(`node_modules\\${path.sep}acorn-jsx`),
           use: [
             {
-              loader: require.resolve('babel-loader'),
+              loader: resolvedBabelLoader,
               options: {
                 presets: [[require.resolve('@babel/preset-env'), { modules: 'commonjs' }]],
               },
@@ -100,7 +104,7 @@ export function webpack(webpackConfig: any = {}, options: any = {}) {
           test: /\.(stories|story)\.mdx$/,
           use: [
             {
-              loader: require.resolve('babel-loader'),
+              loader: resolvedBabelLoader,
               options: createBabelOptions({ babelOptions, mdxBabelOptions, configureJSX }),
             },
             {
@@ -117,7 +121,7 @@ export function webpack(webpackConfig: any = {}, options: any = {}) {
           exclude: /\.(stories|story)\.mdx$/,
           use: [
             {
-              loader: require.resolve('babel-loader'),
+              loader: resolvedBabelLoader,
               options: createBabelOptions({ babelOptions, mdxBabelOptions, configureJSX }),
             },
             {