Bug with reactStrictMode (<StrictMode/>)

[AlexanderKositsyn]

React calls useEffect this one twice in strictMode. It results in error No matching state found in storage. I found a solution to fix this by disabling this mode. I work with nextjs so I just remove reactStrictMode: true from next.config.js. So I decided to create issue for people who will get this bug 😄

[bdekok]

I've noticed the same thing in my project

[mathieu-fournier]

Disabling strict mode is not recommended because, without it, you won't benefit from it's warning about side effects and more.
Instead, it might be better to put the strict mode node after the authentication component. So at least, everything under the auth component will benefit from stric mode.

Ex :
...
<Authentication
<StrictMode <---- below the auth
<other stuff/
</StrictMode
</Authentication

The best would be that the second re-render is supported by the lib tho.

[wutzebaer]

I have a problem with that too. The second trigger interrupts sometimes (race condition) the first redirect what leads to an error in firefox.

Putting AuthProvider outside of StrictMode is a problem, because AuthProvider must be inside BrowserRouter to redirect after login, but idk, if it is an problem if BrowserRouter is outside of StrictMode

[mathieu-fournier]

@wutzebaer

StricMode is a development tool that warns us about possible unwanted side-effect and other common issues that happens in react.
So to answer your question, it's up to you to decide if it's a problem of not.
https://reactjs.org/docs/strict-mode.html

In my opinion, it;s not a problem if BrowserRouter is outside of strict mode.
Since routing usually happens only once.

Hope it helps (:

[cardano-tools-nft]

@mathieu-fournier thank you for clarification

[Darhagonable]

I have similar issue with StrictMode in Firefox (it's not an issue on chromium).
Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource.
or
Uncaught (in promise) AbortError: The operation was aborted

It says error happens in the _signinStart function in oidc-react.js

async signinRedirect(args = {}) {
  this._logger.create("signinRedirect");
  const {
    redirectMethod,
    ...requestArgs
  } = args;
  const handle = await this._redirectNavigator.prepare({ redirectMethod });
  await this._signinStart({
    request_type: "si:r",
    ...requestArgs
  }, handle);
}

Limiting StrictMode to only be enabled after authentication is done isn't ideal.

[jamesdh]

This should be fixed by #962