Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

"ReferenceError: navigator is not defined" error when page is first time accessed in Next.js

See original GitHub issue

Issue and Steps to Reproduce

Setup _app.tsx in Next.js like below:

function CustomApp({
    Component,
    pageProps
}: AppPropsWithLayout): JSX.Element {

    const router = useRouter()
    const withCustomHistory = () => {
        return {
            replaceState: (url: string) => {
                router.replace({
                    pathname: url,
                }).then(() => {
                    window.dispatchEvent(new Event('popstate'));
                });
            }
        };
    };

    const withLayout = Component.layout ?? (page => page);
    return (
        <OidcProvider withCustomHistory={withCustomHistory} configuration={{
            authority: '...',
            client_id: '...',
            redirect_uri: '...',
            silent_redirect_uri: '...',
            scope: 'openid profile email offline_access',
        }}>
            {withLayout(<Component {...pageProps} />)}
        </OidcProvider>
    );
}

Run the page in browser.

Versions

6.5.5

Screenshots

Expected

No errors

Actual

[dev:nextjs] error - unhandledRejection: ReferenceError: navigator is not defined
[dev:nextjs]     at D:\VS\accelist-nextjs-starter\node_modules\@axa-fr\react-oidc\dist\vanilla\initWorker.js:111:17
[dev:nextjs]     at step (D:\VS\accelist-nextjs-starter\node_modules\@axa-fr\react-oidc\dist\vanilla\initWorker.js:33:23)
[dev:nextjs]     at Object.next (D:\VS\accelist-nextjs-starter\node_modules\@axa-fr\react-oidc\dist\vanilla\initWorker.js:14:53)
[dev:nextjs]     at D:\VS\accelist-nextjs-starter\node_modules\@axa-fr\react-oidc\dist\vanilla\initWorker.js:8:71
[dev:nextjs]     at new Promise (<anonymous>)
[dev:nextjs]     at __awaiter (D:\VS\accelist-nextjs-starter\node_modules\@axa-fr\react-oidc\dist\vanilla\initWorker.js:4:12)
[dev:nextjs]     at initWorkerAsync (D:\VS\accelist-nextjs-starter\node_modules\@axa-fr\react-oidc\dist\vanilla\initWorker.js:106:87)
[dev:nextjs]     at Oidc.<anonymous> (D:\VS\accelist-nextjs-starter\node_modules\@axa-fr\react-oidc\dist\vanilla\oidc.js:617:87)
[dev:nextjs]     at step (D:\VS\accelist-nextjs-starter\node_modules\@axa-fr\react-oidc\dist\vanilla\oidc.js:59:23)
[dev:nextjs]     at Object.next (D:\VS\accelist-nextjs-starter\node_modules\@axa-fr\react-oidc\dist\vanilla\oidc.js:40:53)