VIte is generating separate js file for types that are common across multiple entry points

[tabrez96]

Hi,
I'm building a chrome extension with react ts and vite. I have two entry points for my content and background scripts. Both of them share a single types file which is present in the root directory. This is my vite configuration:

import path from "path";
import react from "@vitejs/plugin-react-swc";
import tailwindcss from "tailwindcss";
import { defineConfig } from "vite";

// https://vitejs.dev/config/
export default defineConfig({
	plugins: [react()],
	css: {
		postcss: {
			plugins: [tailwindcss()],
		},
	},
	build: {
		rollupOptions: {
			input: {
				background: path.resolve(__dirname, "src/services/background/index.ts"),
				content: path.resolve(__dirname, "src/Pages/Content/index.tsx"),
			},
			output: {
				entryFileNames: "[name].js",
				assetFileNames: "[name][extname]",
			},
		},
		sourcemap: true,
	},
});

And this is my directory structure:

The generated build has types in a separate directory like this:

Both the bundled background and content scripts are importing types form this directory. Because of this my extension is not working as it throws error saying 'import statement cannot be used outside a module'.

How to bundle the types along with the javascript bundle?