Holderjs with Vite
- Dominant language
- JavaScript
- Stars
- 5.8k
- Forks
- 585
- PR merge metrics
- No merged PRs in 30d
Description
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 `window.global = window` 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(
,
)
}
```
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 (
Vite + React
setCount((count) => count + 1)}>
count is {count}
Edit src/App.tsx and save to test HMR
Click on the Vite and React logos to learn more
)
}
export default App
```

What is the cause of this error? I'll provide more information if needed.
Contributor guide
No contributing guide indexed for this repository
Research direction
Reproduce the error in the create-vite React project using the import and run() call shown in App.tsx. Inspect the generated bundle around exports.newEl and compare how the Vite build provides the global document reference. Done means identifying the cause and documenting or implementing a compatible HolderJS behavior for this setup.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react, vite
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100