ReferenceError: document is not defined

[aliskhanoff]

Environment:

• nextjs
• node: v21.5.0
• react: 18+

I am trying to conditionally render component when the user wants to play a game
const [playTetris, setPlayTetris] = useState(false);
and conditional render
{ playTetris && <Tetris />) }

At the dev environment - doesn't make any problem.

While Building:

ReferenceError: document is not defined

Probably, the Tetris component trying to access the window.document before ComponentDidMount?

[brandly]

Hey, sorry I just noticed this issue.

I see you're using nextjs. Are you using the app/ router? I haven't tried this lib in that kind of server-rendered environment

This is the only place document gets touched, so I guess doing it at the module level is causing trouble

react-tetris/src/modules/detect-shift.ts

Lines 7 to 22 in 52ca9e3

	document.addEventListener('keydown', (e) => {
	if (e.shiftKey && !isPressed) {
	isPressed = e.shiftKey;
	callCallbacks();
	}
	return true;
	});
	document.addEventListener('keyup', (e) => {
	if (!e.shiftKey && isPressed) {
	isPressed = e.shiftKey;
	}
	return true;
	});

[ImranSefat]

Any idea on how to fix this issue? I am trying to run this on an expo native react project, thought at first it might be a problem with the dom-manipulation as I'm running this with expo go in my iPhone.

[brandly]

@ImranSefat want to file a separate issue about supporting react native? It seems like in that environment, you wouldn't want any keyboard handling, ticks would be handled with Timers instead of window, etc. It'd be a bit more work