Compiled with errors and the sign in button is disabled.

[ruwikmann]

It shows this error for a second before compiling:

Error: Use of 'getAuthResponseToken' requires location which is unavailable on the '[object global]' object within the currently executing environment.
▶ 5 stack frames were collapsed.
Module../pages/index.js
./pages/index.js:8
5 | import "../styles/index.scss"
6 |
7 | const appConfig = new AppConfig(['store_write'])

8 | const blockstack = ReactBlockstack({appConfig})
9 |
10 | const Index = () => {
11 | const { signIn } = useBlockstack()

After compiling - sign in button disabled - it shows this when inspected:

Warning: Extra attributes from the server: disabled.
Failed to load resource: net::ERR_INCOMPLETE_CHUNKED_ENCODING
GET http://localhost:3000/_next/webpack-hmr?page=/ net::ERR_CONNECTION_REFUSED

It also shows this in the terminal:

Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://fb.me/react-uselayouteffect-ssr for common fixes.
in Index (at _app.js:15)
in Fragment
in MyApp
in Unknown
in Context.Provider
in Context.Provider
in Context.Provider
in AppContainer

I have no idea how to debug.

The authentication logic (HOC version) in Banter is placed in _app.js.

I was previously experimenting with 'react-blockstack' by also placing it there, just the Context version as _app.js is best designed as a class component. I did not manage to resolve it.

Here are a few relevant posts that could give you an idea about how to make it work:
can _app.js be functional
how to set initial state in _app.js
how to use this.context in _app.js
potential solution with hooks

Sorry for the long post. It seems like I've researched everything on the web but still not getting anywhere.

[njordhov]

The failure seems to happen when the page renders on the server, rather than in the browser. It could be that react hooks conflicts with NextJs server side rendering?

[ruwikmann]

No issue with hooks and server-side-rendering per se - only the aforementioned _app.js needs to be a class component. Here is a fantastic article describing refactoring a whole Next.js app from HOC to hooks. I need some practice with more simple components to get the gist of it, though.

[njordhov]

I suggest you replace useBlockstack() with useState() for now and get back to use react-blockstack when you have server-side rendering working with react hooks.

[ruwikmann]

Ok, I'll give it a shot. Thanks.