react-useportal: Can't show modal on page load without opening event

Whenever I want to show modal on render(make it visible without opening event) I get Warning: Expected server HTML to contain a matching <div> in <div>.

My Code;

const SignInModal = () => {
  var { openPortal, closePortal, isOpen, Portal } = usePortal({
    closeOnEsc: true,
    // bindTo: typeof window !== 'undefined' && document.getElementById('__next'),

  const modalElem = !isOpen && (
      <ModalBox closeModal={closePortal}>
        <div className="modal__mid1">
          <h4 className="header--medium">Sign In to Walkway</h4>
          <InputText_1>Email or Username</InputText_1>
          <div className="modal__">
            <span>Forgot Password</span>
          <div className="modal__mainBtn">
            <div className="modal__mainBtn__line" />
            <TextButton size="18">Sign Up</TextButton>
            <div className="modal__mainBtn__line" />
          <div className="modal__">
            <button className="haloOnHov socialMediaBtn">
                  backgroundImage: `url('../static/icons/fb.svg')`,
              Sign In with Facebook
            Don’t have an account? <span>Register Now</span>

  // return modalElem
  return {
    SignIn_modal: () => modalElem,

About this issue

  • Original URL
  • State: open
  • Created 5 years ago
  • Comments: 16 (7 by maintainers)

Most upvoted comments

found a hack/work-around for nextjs users…utilizing…dynamic importing no it’s not perfect but considering a lot of times portals are called asynchronously I think this is a halfway decent solution.

const PureSlider = dynamic(
  () => import('./pureSlider').then(mod => mod.PureSlider),
    ssr: false,

If anyone has a better solution or suggestion I’m all ears 🛩️

btw, try restarting server on codesandbox if you don’t see modal’s html on first load