NextJS Build fails

[Jyolbriger]

I implemented NoSleep into my NextJS App and tried to build on Vercel but the process unfortunately failed. See the server log below.

On my local machine it's not throwing an error.
NextJS-Version: 12.0.1

EDIT: I see there has been a ticket already concerning SSR and a workaround: https://github.com/richtr/NoSleep.js/pull/106

Is there a way to deploy my project via build process on Vercel with SSR and to use NoSleep?

00:08:00.982	> Build error occurred
00:08:00.987	ReferenceError: navigator is not defined
00:08:00.987	at Q (/vercel/path0/node_modules/nosleep.js/dist/NoSleep.min.js:2:1732)
00:08:00.987	at new A (/vercel/path0/node_modules/nosleep.js/dist/NoSleep.min.js:2:1900)
00:08:00.988	at Object.2588 (/vercel/path0/.next/server/pages/undercover.js:34:15)
00:08:00.988	at webpack_require (/vercel/path0/.next/server/webpack-runtime.js:25:42)
00:08:00.989	at webpack_exec (/vercel/path0/.next/server/pages/undercover.js:300:39)
00:08:00.989	at /vercel/path0/.next/server/pages/undercover.js:301:70
00:08:00.989	at Function.webpack_require.X (/vercel/path0/.next/server/webpack-runtime.js:108:21)
00:08:00.990	at /vercel/path0/.next/server/pages/undercover.js:301:47
00:08:00.990	at Object. (/vercel/path0/.next/server/pages/undercover.js:304:3)
00:08:00.990	at Module._compile (internal/modules/cjs/loader.js:1085:14) {
00:08:00.991	type: 'ReferenceError'
00:08:00.991	}

[appcessorize]

Did you get this to work?

[H4sh3]

Have you tried using it inside useEffect? This way the code is only executed on the client.

const { request, release } = useNoSleepWakeLock();

useEffect(() => {
    request()
    return () => {
        release()
    }
}, [])

Edit: useNoSleepWakeLock is this react hook:
https://github.com/JoshuaKGoldberg/use-no-sleep/blob/master/src/index.ts

[ioandev]

Here is what I ended up doing:

let [noSleepEnabled, setNoSleepEnabled] = useNoSleep()
let handleNoSleepClick = () => {
	setNoSleepEnabled(!noSleepEnabled)
}


    <Button onClick={handleNoSleepClick}>
            ....
    </Button> 


    import NoSleep from "nosleep.js";
    import { useEffect, useMemo, useState } from "react";
    
    export default function useNoSleep () {
        const [enabled, setEnabled] = useState(false);
        const [isMounted, setIsMounted] = useState(false);
    
        let noSleep = useMemo(() => {
            if (!isMounted) {
                return null
            }
    
            return new NoSleep()
        }, [isMounted])
    
        useEffect(() => {
            setIsMounted(true)
    
            if (noSleep == null) {
                return;
            }
    
            if (enabled) {
                noSleep.enable();
            } else {
                noSleep.disable();
            }
    
            return function cleanup() {
                if (noSleep == null) {
                    return;
                }
                
                if (enabled) {
                    noSleep.disable()
                }
            }
        }, [enabled, noSleep]);
    
        return [enabled, setEnabled] as const
    }