diff --git a/code/lib/core-common/package.json b/code/lib/core-common/package.json
index e92ee9948da7..f4342555b4c8 100644
--- a/code/lib/core-common/package.json
+++ b/code/lib/core-common/package.json
@@ -55,6 +55,7 @@
     "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0",
     "esbuild-register": "^3.5.0",
     "execa": "^5.0.0",
+    "fd-package-json": "^1.2.0",
     "file-system-cache": "2.3.0",
     "find-cache-dir": "^3.0.0",
     "find-up": "^5.0.0",
@@ -64,7 +65,6 @@
     "lazy-universal-dotenv": "^4.0.0",
     "node-fetch": "^2.0.0",
     "picomatch": "^2.3.0",
-    "pkg-dir": "^5.0.0",
     "prettier-fallback": "npm:prettier@^3",
     "pretty-hrtime": "^1.0.3",
     "resolve-from": "^5.0.0",
diff --git a/code/lib/core-common/src/utils/template.ts b/code/lib/core-common/src/utils/template.ts
index 47541f40b454..861384dc9b70 100644
--- a/code/lib/core-common/src/utils/template.ts
+++ b/code/lib/core-common/src/utils/template.ts
@@ -1,5 +1,5 @@
 import path from 'path';
-import { sync } from 'pkg-dir';
+import { findPackagePathSync } from 'fd-package-json';
 import fs from 'fs';
 
 const interpolate = (string: string, data: Record<string, string> = {}) =>
@@ -9,7 +9,9 @@ export function getPreviewBodyTemplate(
   configDirPath: string,
   interpolations?: Record<string, string>
 ) {
-  const base = fs.readFileSync(`${sync(__dirname)}/templates/base-preview-body.html`, 'utf8');
+  const packagePath = findPackagePathSync(__dirname);
+  const packageDir = packagePath ? path.dirname(packagePath) : undefined;
+  const base = fs.readFileSync(`${packageDir}/templates/base-preview-body.html`, 'utf8');
 
   const bodyHtmlPath = path.resolve(configDirPath, 'preview-body.html');
   let result = base;
@@ -25,7 +27,9 @@ export function getPreviewHeadTemplate(
   configDirPath: string,
   interpolations?: Record<string, string>
 ) {
-  const base = fs.readFileSync(`${sync(__dirname)}/templates/base-preview-head.html`, 'utf8');
+  const packagePath = findPackagePathSync(__dirname);
+  const packageDir = packagePath ? path.dirname(packagePath) : undefined;
+  const base = fs.readFileSync(`${packageDir}/templates/base-preview-head.html`, 'utf8');
   const headHtmlPath = path.resolve(configDirPath, 'preview-head.html');
 
   let result = base;
diff --git a/code/yarn.lock b/code/yarn.lock
index da5523a1023d..b8300af238c1 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -5889,6 +5889,7 @@ __metadata:
     esbuild: "npm:^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0"
     esbuild-register: "npm:^3.5.0"
     execa: "npm:^5.0.0"
+    fd-package-json: "npm:^1.2.0"
     file-system-cache: "npm:2.3.0"
     find-cache-dir: "npm:^3.0.0"
     find-up: "npm:^5.0.0"
@@ -5899,7 +5900,6 @@ __metadata:
     mock-fs: "npm:^5.2.0"
     node-fetch: "npm:^2.0.0"
     picomatch: "npm:^2.3.0"
-    pkg-dir: "npm:^5.0.0"
     prettier-fallback: "npm:prettier@^3"
     prettier-v2: "npm:prettier@^2"
     prettier-v3: "npm:prettier@^3"
@@ -15079,6 +15079,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fd-package-json@npm:^1.2.0":
+  version: 1.2.0
+  resolution: "fd-package-json@npm:1.2.0"
+  dependencies:
+    walk-up-path: "npm:^3.0.1"
+  checksum: 10c0/712a78a12bd8ec8482867b26bbcb2ff1dca9b096a416150c138e1512f1879c6d23dfb41b03b8e9226afc1e58a35df4738e9f9ae57032ff1dbbae75acfb70343b
+  languageName: node
+  linkType: hard
+
 "fetch-blob@npm:^3.1.2, fetch-blob@npm:^3.1.4":
   version: 3.2.0
   resolution: "fetch-blob@npm:3.2.0"