Doesn't work with Nextjs/SSR

[matthewkeil]

Works fine with client render but server-side rendering errors because window is not defined

[guillermodlpa]

Hi all, thanks @matthewkeil for raising this issue, and for starting a PR https://github.com/mdtanrikulu/use-metamask/pull/19 to fix it! I came across it too.

As a temporary workaround until the fix is released, one can wrap the specific components using useMetamask with a no-SSR wrapper.

<NoSsr>
  <ComponentLeveragingUseMetamask />
</NoSsr>

Here's Material-UI's implementation: https://github.com/mui-org/material-ui/blob/v5.2.6/packages/mui-base/src/NoSsr/NoSsr.js - Since I'm not using Material-UI for my project, I made a simpler component:

const NoSsr = ({ children }: { children: React.ReactNode }) => {
  const [mountedState, setMountedState] = useState(false);
  useEffect(() => {
    setMountedState(true);
  }, []);
  return <>{mountedState ? children : null}</>;
};

Hope this helps until the fix is released!

Also, @mdtanrikulu, thanks for creating use-metamask! It's so convenient!

[mdtanrikulu]

Thank you so much for you kind words! I was away maintaining this package, but back and updating things as much as I can. The relevant package is merged, gonna publish new version with it.