"ResizeObserver loop limit exceeded" using AppStack bootstrap template


I'm using TMS WebCore last version (1.9.1) with Delphi Seattle and I´m trying to integrate the responsive template from getbootstrap:

So far I have follow all steps from documentation and the example in demo. I can run it, but I get the following error on Chrome (Versión 96.0.4664.45 (Build oficial) (64 bits)):
ResizeObserver loop limit exceeded |
at http://localhost:8000/Project1/Project1.html [0:0]

The template works ok without Web Core, of course.

How can I solve this situation? For me it is a showstopper, cause I use the template on other platforms (namely asp.net webforms!) but I can not use it on web core.

Thanks for any advice. I´m sure I am missing something.

How exactly did you use/integrate this template in your TMS WEB Core project?
Did you put the JS lib references in the project HTML and then the HTML template in the form1 HTML file?

Thanks for your answer. I think I found the problem when writing a reply.
I had this project1.html:

<!DOCTYPE html>
<html lang="en">
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta $(ThemeColor)>
    <noscript>Your browser does not support JavaScript!</noscript>
    <link rel="icon" href="data:;base64,=">
    <meta $(Manifest)>
    <title>TMS Web Project</title>

	<link rel="canonical" href="https://appstack.bootlab.io/dashboard-saas.html" />
	<link rel="shortcut icon" href="img/favicon.ico">

	<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap" rel="stylesheet">

    <script type="text/javascript" src="$(ProjectName).js"></script>
<meta $(BodyParameters)>

  <script type="text/javascript">

  <script src="js/app.js"></script>


And the html template on Unit1.html (snipped for clarity purposes). DFM almost empty:

<!DOCTYPE html>
<html lang="en">

	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta name="description" content="Responsive Bootstrap 5 Admin &amp; Dashboard Template">
	<meta name="author" content="Bootlab">

	<title>SaaS Dashboard | AppStack - Admin &amp; Dashboard Template</title>

	<link class="js-stylesheet" href="css/light.css" rel="stylesheet">
<body data-theme="default" data-layout="fluid" data-sidebar-position="left" data-sidebar-behavior="sticky">
	<div class="wrapper">
		<nav id="sidebar" class="sidebar">

	<!-- Originally the template js script is called here: --> 
        <!--<script src="js/app.js"></script> -->



The problem was the line in unit1.html:

    <link class="js-stylesheet" href="css/light.css" rel="stylesheet">

If I put this line in the project1.html, it seems to work.

Thanks again.

Not sure what exactly css/light.css and/or js/app.js do, but indeed moving it to the project HTML to ensure it is already loaded when the form's HTML file is loaded often solves such dependencies.

Yes. In this particular bootstrap template they are (afaik):
css/light.css: file with the stylesheet selecting the theme used by the template (light.css, dark.css, etc).
js/app.css: where all javascript code of dynamic items of the template is (hamburguer menu, loading some images, etc).

I found that the js/app.css is mandatory to be at the end of the project.html file, after rtl.run(). I think this way, the page is loaded before the code of the template runs.

I write it here, in hope it helps someone with this problems with AppStack bootstrap theme.

Thanks again. I´m sure I will post my experience with TMS Web Core.