cannot use function inside function in service worker in dev mode

[bernoussama]

service worker background.ts

console.log("Hello from the background script!");

chrome.runtime.onInstalled.addListener((details) => {
	if (details.reason !== "install" && details.reason !== "update") return;
	chrome.contextMenus.create({
		id: "testExt",
		title: "test extension",
		contexts: ["selection"],
	});
});

chrome.contextMenus.onClicked.addListener((info, tab) => {

	if (info.menuItemId == "testExt") {
		console.log("sideKlicked");
		if (tab && tab.id !== undefined) {
			chrome.scripting.executeScript({
				target: { tabId: tab.id },
				func: funcCaller,
			});
		}
	}
});

function testFunc() {
	alert("testFunc called");
	console.log("called testFunc");
}

function funcCaller() {
	console.log("called funcCaller");
	testFunc();
}

running npm run dev
output in tab console when the context menu is clicked:

called funcCaller
VM828:3 Uncaught ReferenceError: testFunc is not defined
    at funcCaller (<anonymous>:3:3)
    at <anonymous>:4:3

manifest.json

{
	"manifest_version": 3,
	"version": "1.0",
	"name": "test-extension",
	"description": "An extension template using React and TypeScript. This template includes a content script using Tailwind.css. To see it in action, visit https://extension.js.org.",
	"background": {
		"service_worker": "./background.ts"
	},
	"content_scripts": [
		{
			"matches": ["https://extension.js.org/*"],
			"js": ["./content/content.tsx"]
		}
	],
	"web_accessible_resources": [
		{
			"resources": ["public/*"],
			"matches": ["<all_urls>"]
		}
	],
	"icons": {
		"16": "public/icon/icon_16.png",
		"48": "public/icon/icon_48.png"
	},
	"permissions": ["storage", "activeTab", "scripting", "contextMenus"],
	"host_permissions": ["<all_urls>"]
}