Facing problem while trying to add bundled content script with svelte store dependency

Question

I am trying to build chrome extension app in svelte where I am using vite as build tool. I have few content scripts file which I am bundling in customBundle.js file with following rollup config:

`export default defineConfig({
    cacheDir: '../../node_modules/.vite/chrome-ext',
    build: {
    rollupOptions: {
        external: ['svelte-routing', 'jquery'/*, 'crypto'*/],
        input: {
            content: path.join(__dirname,'./customBundle.js'),
            background: path.join(__dirname, './background.js'),
            index: path.join(__dirname,'./index.html')
        },
        output: {
                entryFileNames: '[name].js',
                format: 'cjs'
        }
        
        }

    },

        plugins: [svelte(),commonjs()]
//rest configuration .......`your text`
});`

my customBundle.js file include import of content script

`import './contentScript.ts';

` inside contentScript.ts I am importing two methods demoabc,demoxyz from files abc and xyz and accessing them in following way:

`import { demoabc } from "./abc";
import { demoxyz } from "./xyz";

demoabc();
demoxyz();`

file abc.ts have following code: `

import { demodep } from "./dep";

export function demoabc() {
  console.log("this demo from abc");
  console.log(demodep());
}`

file xyz.ts have following code:

 
`import { loggedIn } from "../../storedemo";

// Method that accesses and logs the loggedIn value
export function demoxyz() {
  loggedIn.subscribe(value => {
    console.log('demoxyz Logged in:', value);
  });
}`

file dep.ts have following code:

`export function demodep() {
  console.log("this demo from dep");
  return "1";
}`

file storedemo.ts have following code:

import { writable } from 'svelte/store';



// Initialize the store with a default value
export const loggedIn = writable(false);`

my manifest.json is as follows

`{
    "name": "MyExtension",
    "description": "MyExtension",
    "manifest_version": 3,
    "version": "1.0.0",
    "action": {
                "default_title": "MyExtension",
        "default_icon": "/common/img/gicon128.png",
        "default_popup": "index.html"
    },
    "background": {
        "service_worker": "background.js"
    },
    "content_scripts": [{
        "matches": [
            "*://*/*"
        ],
        "js": [
            "common/jquery/jquery-3.7.0.min.js",
            "content.js"
        ],
        "css": ["style.css"],
        "img": ["common/img/gicon16.png"]
    }],
    "web_accessible_resources": [{
        "resources": ["index.html", "style.css", "common/icons/*"],
        "matches": [
            "<all_urls>"
        ]
        }
    ],
    "permissions": [
        "storage",
               "all_frames",
               "activeTab"
    ],
    "host_permissions": [
        "<all_urls>"
    ]

}`

After building app when I am loading extension getting following error in console: content.js:1 Uncaught ReferenceError: require is not defined at content.js:1:23

the thing is on bundling content script its adding require in case of svelte store dependency inside content.js. But when I remove svelte-store dependency I am able to run without any errors. i.e incase i reomve demoxyz(); from contentScript.ts it will work fine. error

I am expecting build configuration or a way where I am able to import files with svelte store dependency within content script.