diff --git a/packages/gatsby-blog/gatsby-config.ts b/packages/gatsby-blog/gatsby-config.ts
index 1ae15b16dd..d696c762f0 100644
--- a/packages/gatsby-blog/gatsby-config.ts
+++ b/packages/gatsby-blog/gatsby-config.ts
@@ -1,9 +1,10 @@
 import type { GatsbyConfig } from "gatsby";
+import path from "path";
 
 const config: GatsbyConfig = {
   siteMetadata: {
     title: `Storyteller AI Blog`,
-    siteUrl: `https://www.yourdomain.tld`
+    siteUrl: `https://www.yourdomain.tld`,
   },
   // More easily incorporate content into your pages through automatic TypeScript type generation and better GraphQL IntelliSense.
   // If you use VSCode you can also use the GraphQL plugin
@@ -12,14 +13,14 @@ const config: GatsbyConfig = {
   plugins: [
     "gatsby-plugin-postcss",
     "gatsby-plugin-image",
-    "gatsby-plugin-sitemap", 
+    "gatsby-plugin-sitemap",
     "gatsby-plugin-sharp",
-    "gatsby-transformer-sharp",    
+    "gatsby-transformer-sharp",
     {
-      resolve: 'gatsby-plugin-manifest',
+      resolve: "gatsby-plugin-manifest",
       options: {
-        "icon": `${__dirname}/src/images/icon.png`
-      }
+        icon: `${__dirname}/src/images/icon.png`,
+      },
     },
     {
       resolve: `gatsby-plugin-mdx`,
@@ -35,20 +36,20 @@ const config: GatsbyConfig = {
       },
     },
     {
-      resolve: 'gatsby-source-filesystem',
+      resolve: "gatsby-source-filesystem",
       options: {
-        "name": "images",
-        "path": `${__dirname}/src/images/`
+        name: "images",
+        path: `${__dirname}/src/images/`,
       },
-      __key: "images"
+      __key: "images",
     },
     {
-      resolve: 'gatsby-source-filesystem',
+      resolve: "gatsby-source-filesystem",
       options: {
-        "name": "pages",
-        "path": `${__dirname}/src/pages/`
+        name: "pages",
+        path: `${__dirname}/src/pages/`,
       },
-      __key: "pages"
+      __key: "pages",
     },
     {
       resolve: `gatsby-source-filesystem`,
@@ -57,7 +58,13 @@ const config: GatsbyConfig = {
         path: `${__dirname}/posts`,
       },
     },
-  ]
+    {
+      resolve: "gatsby-plugin-resolve-src",
+      options: {
+        srcPath: path.resolve(__dirname, "src"),
+      },
+    },
+  ],
 };
 
 export default config;
diff --git a/packages/gatsby-blog/gatsby-node.js b/packages/gatsby-blog/gatsby-node.js
index 98f4c2e86e..bc9c69cac0 100644
--- a/packages/gatsby-blog/gatsby-node.js
+++ b/packages/gatsby-blog/gatsby-node.js
@@ -1,9 +1,10 @@
-
-const path = require("path")
-const postTemplate = path.resolve(`${__dirname}/src/components/postTemplate.tsx`)
+const path = require("path");
+const postTemplate = path.resolve(
+  `${__dirname}/src/components/postTemplate.tsx`,
+);
 
 exports.createPages = async ({ graphql, actions, reporter }) => {
-  const { createPage } = actions
+  const { createPage } = actions;
 
   const result = await graphql(`
     query {
@@ -21,17 +22,27 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
         }
       }
     }
-  `)
+  `);
+
+  exports.onCreateWebpackConfig = ({ actions }) => {
+    actions.setWebpackConfig({
+      resolve: {
+        alias: {
+          "@babel/runtime": require.resolve("@babel/runtime"),
+        },
+      },
+    });
+  };
 
   if (result.errors) {
-    reporter.panicOnBuild('Error loading MDX result', result.errors)
+    reporter.panicOnBuild("Error loading MDX result", result.errors);
   }
 
   // Create blog post pages.
-  const posts = result.data.allMdx.nodes
+  const posts = result.data.allMdx.nodes;
 
   // you'll call `createPage` for each result
-  posts.forEach(node => {
+  posts.forEach((node) => {
     createPage({
       // As mentioned above you could also query something else like frontmatter.title above and use a helper function
       // like slugify to create a slug
@@ -41,6 +52,6 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
       // You can use the values in this context in
       // our page layout component
       context: { id: node.id },
-    })
-  })
-}
\ No newline at end of file
+    });
+  });
+};
diff --git a/packages/gatsby-blog/package.json b/packages/gatsby-blog/package.json
index cab654528f..854ed56bf4 100644
--- a/packages/gatsby-blog/package.json
+++ b/packages/gatsby-blog/package.json
@@ -26,6 +26,7 @@
     "gatsby-plugin-manifest": "^5.13.1",
     "gatsby-plugin-mdx": "^5.13.1",
     "gatsby-plugin-postcss": "^6.13.1",
+    "gatsby-plugin-resolve-src": "^2.1.0",
     "gatsby-plugin-sharp": "^5.13.1",
     "gatsby-plugin-sitemap": "^6.13.1",
     "gatsby-remark-images": "^7.13.1",
@@ -38,6 +39,7 @@
     "tailwindcss": "^3.4.6"
   },
   "devDependencies": {
+    "@babel/runtime": "^7.25.0",
     "@types/node": "^20.11.19",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19",
diff --git a/yarn.lock b/yarn.lock
index e7856a8084..87dc834fe0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -17431,6 +17431,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"gatsby-plugin-resolve-src@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "gatsby-plugin-resolve-src@npm:2.1.0"
+  peerDependencies:
+    gatsby: ">2.0.0-alpha"
+  checksum: df02440f4b703d9323bffc3db6f02d8db0401281afd220d7857547de28cf7cf9c97454f604e9cdb8686dcc898624bfb0164d28b04f938b339515b9ece1e0908c
+  languageName: node
+  linkType: hard
+
 "gatsby-plugin-sharp@npm:^5.13.1":
   version: 5.13.1
   resolution: "gatsby-plugin-sharp@npm:5.13.1"
@@ -30255,6 +30264,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "storyteller-ai-blog@workspace:packages/gatsby-blog"
   dependencies:
+    "@babel/runtime": ^7.25.0
     "@fortawesome/fontawesome-svg-core": 6.2.1
     "@fortawesome/free-brands-svg-icons": 6.2.1
     "@fortawesome/free-solid-svg-icons": 6.2.1
@@ -30268,6 +30278,7 @@ __metadata:
     gatsby-plugin-manifest: ^5.13.1
     gatsby-plugin-mdx: ^5.13.1
     gatsby-plugin-postcss: ^6.13.1
+    gatsby-plugin-resolve-src: ^2.1.0
     gatsby-plugin-sharp: ^5.13.1
     gatsby-plugin-sitemap: ^6.13.1
     gatsby-remark-images: ^7.13.1