hello. I am getting this error in the following js 13: Error: Unknown root exit status. I was wondering if any of you seniors have had this experience?

[jungjh565]

Summary

hello.
I am getting this error in the following js 13: Error: Unknown root exit status.

I have the code below, if (typeof window !== ‘undefined’) I apply it, I get Error: Unknown root exit status. I get this error and if I don't apply it, there is no error, but when I view the source, the file is in error. How can I deal with this situation?
‘use client’;
import { useCallback, useEffect, useLayoutEffect, useState } from ‘react’;

function useMediaQuery() {
const [matches, setMatches] = useState(false);

const handleCheckFuc = useCallback(() => {
if (typeof window !== ‘undefined’) {
const mediaQuery = window.matchMedia(‘(max-width: 767px)’);
setMatches(mediaQuery.matches);
}
}, []);

useEffect(() => {
handleCheckFuc();
}, [handleCheckFuc]);

return { isMobile: () => matches };
}

export default useMediaQuery;

Additional information

No response

Example

No response

[icyJoseph]

Where are you using this hook? in a server component? It won't work if used directly on a server component, it has to be used by a client component.

[icyJoseph]

No I am not sure, show us how you use this hook.

[jungjh565]

const { isMobile } = useMediaQuery();

const handleAppBtn = React.useCallback(() => {
if (isMobile()) {}
},[isMobile])

 <MobileToggleMenu
           checkMobile={isMobile() as boolean}   />

 <BasicBtn width={isMobile() ? "100%" : "fit-content"} />

This is how I'm using it.

We're using it inside a function, and we're using it down to a prop.
The fetch is const { isMobile } = useMediaQuery(); so it's being used inside ‘use client’.

[icyJoseph]

Ok, so I think this causes an issue where, server starts false, and then you poorly synchronize within the client, so if the width is larger than 767px, you switch to true, during render, and crash out.

If you narrow down your viewport, to less than 767px, it probably won't crash. For this kind of thing it is better to use CSS to the styling, rather than JavaScript, as it will necessarily cause divergence.

• Why do Client Components get SSR'd to HTML? reactwg/server-components#4

Do remember, that client components are SSR'd too.

[jungjh565]

thank you I think I know something

[vogelino]

@jungjh565 What did you discover? Anyone found an explanation as to why the Unknown root exit status error is thrown? What does it mean? When does this happen?

[JClackett]

Yeah im getting this error quite often, im embedding a page in an iframe and after a server action am having to redirect, but sometimes get this root exit status error