ResizeObserver loop completed with undelivered notifications


Topic: ResizeObserver loop completed with undelivered notifications Error on Resize

aycontractor asked a year ago

Expected behavior When resizing browser I expect the page to resize and not crash. Same happens if I double click the title bar to maximize/restore.

Actual behavior When doing the expected behavior above, I receive the error:

*Uncaught runtime errors:

ERROR

ResizeObserver loop completed with undelivered notifications.*

Resources (screenshots, code snippets etc.)

Basic react App.js login code:

import React from 'react';
import {MDBContainer, MDBCol, MDBRow, MDBBtn, MDBInput, MDBFooter } from 'mdb-react-ui-kit';
import './mdb.css';

function App() {

  return (
    <>
    <MDBContainer fluid className="p-4 my-5 h-custom">
      <MDBRow>
        <MDBCol col='10' md='6'>
          <img src="images/jjd-norm.jpg" className="img-fluid" alt="JJD" />
        </MDBCol>
        <MDBCol col='4' md='6'>
          <div className="divider d-flex align-items-center my-4">
            <p className="text-center fw-bold mx-3 mb-0">Sign In</p>
          </div>

          <MDBInput wrapperClass='mb-4' label='Email address' id='iemail' type='email' size="lg"/>
          <MDBInput wrapperClass='mb-4' label='Password' id='ipw' type='password' size="lg"/>

          <div className="d-flex justify-content-between mb-4">
            <MDBBtn className="mb-0 px-5" size='lg'>Login</MDBBtn>
            <a href="!#">Forgot password?</a>
          </div>

        </MDBCol>

      </MDBRow>
    </MDBContainer>
    <MDBContainer className='p-0 m-0'>
      <MDBFooter bgColor='light' className='fixed-bottom text-lg-start text-muted'>
      <MDBContainer className='p-0'/>
      <div className='p-3' style={{ backgroundColor: 'rgba(0, 0, 0, 0.05)' }}>
        Copyright © 2023 Bundy & Associates. All rights reserved.
      </div>
    </MDBFooter>
    </MDBContainer>
    </>
);
}

export default App;

The App.css content:

body {
  font-family: Roboto, Helvetica, Arial, sans-serif;
}

The body tag in index.html:

<body class="d-flex flex-column min-vh-100 p-0 m-0">

Mateusz Lazaru staff commented a year ago

How to reproduce the problem? It does not show up on clean create-react-app project.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Open

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: MDB5 6.2.0
  • Device: Lenovo Laptop
  • Browser: Microsoft Edge
  • OS: Windows 10 22H2
  • Provided sample code: No
  • Provided link: No