How to avoid creating an assets folder for shared dependencies across multiple input files?

Question

I'm trying to create a Firefox extension using Vite. I have 3 inputs:

1. popup
2. contentScript
3. backgroundScript

popup and contentScript both use React (I need to render something with the content script). However, when Vite bundles my code, it creates the jsx runtime in dist/shared/assets and imports this into both popup.js and contentScript.js

This is causing trouble as the contentScript throws the following error:

SyntaxError: import declarations may only appear at top level of a module

If I remove popup from my inputs, the error goes away as contentScript is bundled into a single file. So is there any way I can force vite to created self contained bundles instead of using shared assets for each of my inputs?

This is my Vite config:

import { defineConfig } from "vite";
import { viteStaticCopy } from "vite-plugin-static-copy";

export default defineConfig
(
    {
        plugins :
        [
            viteStaticCopy
            (
                {
                    targets :
                    [
                        {
                            src: "./manifest.json",
                            dest: "",
                        }
                    ]
                }
            )
        ],
        build :
        {
            rollupOptions :
            {
                input :
                {
                    popup : "./popup.html",
                    content: "./src/content/content.tsx",
                    background: "./src/background/background.ts"
                },
                output :
                {
                    entryFileNames: "[name].js",
                    // manualChunks: undefined,
                    // chunkFileNames: "[name].js",
                    // assetFileNames: "[name][extname]"
                }
            }
        },
    }
);

I have also tried setting manualChunks to undefined but this did not help so it's commented out for now.