Write pure CSR components on Deno+Fresh

Sry that I’m new to front-end development.

I have a JS function that operates Monaco editor’s API. Let’s suppose it looks likes this:

export function setTheme(themeName) {
    fetch(`./themes/${themeName}.json`)
        .then(response => response.json())
        .then(themeData => {
            console.log(themeName)
            console.log(themeData)
            monaco.editor.defineTheme(themeName, themeData);
            monaco.editor.setTheme(themeName);
        })
}

It relies on APIs which are not available on Deno, so it’s put as a static JS file. I tried to bundle it with an Island component here:

<Dropdown list={themeList} onChange={setTheme} />

This cannot pass the compile because the server always tries to render it server-side although it’s actually inside an Island (As ChatGPT told me). My question is how to bundle the function with the component only during the client side. ChatGPT asked me to put related CSR-only codes with setState functions like that:

useEffect(() => setTheme(themeName), []);

So I used a function object to store it:

    const setThm = (themeName: string) => {
        useEffect(() => setTheme(themeName), [themeName]);
    }

But Deno still rejected to render the page as it tried to render the function server-side. Function also does not help:

function setThm(themeName: string){
    useEffect(() => setTheme(themeName), []);
}

The same error as above:

error: Uncaught (in promise) ReferenceError: document is not defined
document.addEventListener('DOMContentLoaded', () => {
^
    at file:///path/to/project/static/editor.js:2:1

    info: document global is not available in Deno.
    hint: Use a library like happy-dom, deno_dom, linkedom or JSDom
          and setup the document global according to the library documentation.
Watcher Process failed. Restarting on file change...

So I really have no idea about how to bundle the CSR-only function with a Fresh component now. What exactly should I do is correct?