From 1aa32d49620b0e24e0949a4b73fe5809af6a3373 Mon Sep 17 00:00:00 2001 From: Azeez Lukman Date: Sun, 17 Jan 2021 09:18:08 -0500 Subject: [PATCH 1/4] expanded on No Router Instance --- errors/no-router-instance.md | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/errors/no-router-instance.md b/errors/no-router-instance.md index 504ce29ecd80..08612bb8cdc7 100644 --- a/errors/no-router-instance.md +++ b/errors/no-router-instance.md @@ -2,8 +2,13 @@ #### Why This Error Occurred +Next.js is universal, which means it executes code first server-side with NodeJS, then on the client-side, `window` object is not defined in NodeJS, so some methods are not supported or availale at build time. During SSR you might have tried to access a router method `push`, `replace`, `back`, which is not supported. #### Possible Ways to Fix It -Move any calls to router methods to `componentDidMount` or add a check such as `typeof window !== 'undefined'` before calling the methods +In a class Component, move any calls to router methods to `componentDidMount` lifecycle method or add a check such as `typeof window !== 'undefined'` before calling the methods + +In a functional Component you can move the code into the `useEffect` hook. checking `typeof window !== 'undefined'` also works in a functional component. + +This way the calls to the router methods are only executed on the client (in the browser), thus ensuring access to the `window` object. From c1c5a50ab4292b1b4856d0d2ca72cf63989d4de6 Mon Sep 17 00:00:00 2001 From: Azeez Lukman Date: Sat, 23 Jan 2021 18:53:13 +0100 Subject: [PATCH 2/4] Fixed typo --- errors/no-router-instance.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/errors/no-router-instance.md b/errors/no-router-instance.md index 08612bb8cdc7..4ad5ad2b9c3f 100644 --- a/errors/no-router-instance.md +++ b/errors/no-router-instance.md @@ -2,7 +2,7 @@ #### Why This Error Occurred -Next.js is universal, which means it executes code first server-side with NodeJS, then on the client-side, `window` object is not defined in NodeJS, so some methods are not supported or availale at build time. +Next.js is universal, which means it executes code first server-side with NodeJS, then on the client-side, `window` object is not defined in NodeJS, so some methods are not supported at build time. During SSR you might have tried to access a router method `push`, `replace`, `back`, which is not supported. #### Possible Ways to Fix It From 6c7d23fbbf701f330ca6f317dd6e720a7d5c65f4 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Sun, 24 Jan 2021 14:22:52 +0100 Subject: [PATCH 3/4] Update no-router-instance.md --- errors/no-router-instance.md | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/errors/no-router-instance.md b/errors/no-router-instance.md index 4ad5ad2b9c3f..818332ada42e 100644 --- a/errors/no-router-instance.md +++ b/errors/no-router-instance.md @@ -2,13 +2,12 @@ #### Why This Error Occurred -Next.js is universal, which means it executes code first server-side with NodeJS, then on the client-side, `window` object is not defined in NodeJS, so some methods are not supported at build time. -During SSR you might have tried to access a router method `push`, `replace`, `back`, which is not supported. +During Pre-rendering (SSR or SSG) you tried to access a router method `push`, `replace`, `back`, which is not supported. #### Possible Ways to Fix It In a class Component, move any calls to router methods to `componentDidMount` lifecycle method or add a check such as `typeof window !== 'undefined'` before calling the methods -In a functional Component you can move the code into the `useEffect` hook. checking `typeof window !== 'undefined'` also works in a functional component. +In a functional Component you can move the code into the `useEffect` hook. -This way the calls to the router methods are only executed on the client (in the browser), thus ensuring access to the `window` object. +This way the calls to the router methods are only executed in the browser. From fe739b1b959a67e48510e2075bca6c24265723b1 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Sun, 24 Jan 2021 14:23:50 +0100 Subject: [PATCH 4/4] Update no-router-instance.md --- errors/no-router-instance.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/errors/no-router-instance.md b/errors/no-router-instance.md index 818332ada42e..2beaafbc71cb 100644 --- a/errors/no-router-instance.md +++ b/errors/no-router-instance.md @@ -6,8 +6,8 @@ During Pre-rendering (SSR or SSG) you tried to access a router method `push`, `r #### Possible Ways to Fix It -In a class Component, move any calls to router methods to `componentDidMount` lifecycle method or add a check such as `typeof window !== 'undefined'` before calling the methods +In a function Component you can move the code into the `useEffect` hook. -In a functional Component you can move the code into the `useEffect` hook. +In a class Component, move any calls to router methods to the `componentDidMount` lifecycle method. This way the calls to the router methods are only executed in the browser.