Holderjs with Vite

[junseuk]

After migrating from create-react-app to vite, there is an issue with calling run() with this error: Uncaught TypeError: Cannot read properties of undefined (reading 'document'). To narrow it down, I created a test project using create vite command and install holderjs, yarn add holderjs. The details of the error is written below:

/* WEBPACK VAR INJECTION */(function(global) {/**
     * Generic new DOM element function
     *
     * @param tag Tag to create
     * @param namespace Optional namespace value
     */
    exports.newEl = function(tag, namespace) {
        if (!global.document) return; //ERROR

        if (namespace == null) {
            return global.document.createElement(tag);
        } else {
            return global.document.createElementNS(namespace, tag);
        }
    };

I've tried to explicitly define global using <script>window.global = window</script> in index.html or put window undefined check in main.tsx:

if (typeof window !== 'undefined') {
  console.log(window);
  ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
  )
}

But none of these worked. This is an App.tsx:

import { useEffect, useState } from 'react';
import reactLogo from './assets/react.svg';
import './App.css';
import { run } from 'holderjs';

function App() {
  const [count, setCount] = useState(0)

  useEffect(() => {
    console.log(run)
  }, [])

  return (
    <div className="App">
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src="/vite.svg" className="logo" alt="Vite logo" />
        </a>
        <a href="https://reactjs.org" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.tsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </div>
  )
}

export default App

What is the cause of this error? I'll provide more information if needed.