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
    }