imsky / imsky/holder

Holderjs with Vite

Open
#236 0 comments 4 reactions 0 assignees View on GitHub
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 logo


React logo


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
```
error

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.