ArcGIS Project not working after Bootstrap Upgrade Error from Version 4 onwards (V3.37 Initial version)

utility9213 — Mon, 16 May 2022 14:39:27 GMT

Good Day everyone, I am currently trying to upgrade my Bootstrap version from version 3.3.7 to version 4 and subsequently version 5. I am able to upgrade to version 4 with very minor CSS changes on my website. However, when I try to upgrade to version 4.1.3. My index.html does not work, it does not load the main page of my project. And this error only occurs on the index.html page. And there is no error or whatsoever in my dev tool. It just doesn't load anything.

Below is the index.html code with Bootstrap 4 (which works), the other components that are in the index.html does not require Bootstrap or Jquery, I am not sure what is the possible reason for this error; I have looked through the patch notice/changes and could not find anything different. Am I missing something?

<!doctype html>
<html lang="en"> 
<head>
<title>Project</title>
<meta http-equiv="content-type" content="text/html; 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">

<!-- Bootstrap 4 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico" />
<link rel="stylesheet" href="./lib/calcite-bootstrap/css/calcite-bootstrap.css">
<link rel="stylesheet" href="./arcgis_js_api/library/3.25/3.25/esri/themes/calcite/dijit/calcite.css">
<link rel="stylesheet" href="./arcgis_js_api/library/3.25/3.25/esri/themes/calcite/esri/esri.css">
<link rel="stylesheet" href="./library/3.25/3.25/esri/dijit/metadata/css/gxe.css"/>
<link rel="stylesheet" href="./library/3.25/3.25/esri/dijit/metadata/css/gxe-calcite.css"/>
<link rel="stylesheet" href="./app/style/main.css">
<link rel="stylesheet" href="./lib/typeahead.css">
<link rel="stylesheet" href="./lib/bootoast.css">
<link rel="stylesheet" href="./custom/custom.css">
</head>

<body class="calcite">
<div id="custom-banner" class="custom-banner"></div>
<div id="app"></div>
<div id="app-loading-node" class="g-app-loading">
    <div class="progress">
      <div class="progress-bar progress-bar-striped active" 
        role="progressbar" style="width:100%">Loading...</div>
    </div>
</div>

<script type="text/javascript">  var dojoConfig = {
    locale: "en",
    async: true,
    parseOnLoad: true,
    packages: [
      {
        name: 'app',
        location: location.pathname.replace(/\/[^/]*$/, '') + '/app',
      }
    ]
  };</script>

<!--Scripts required for Bootstrap 4-->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<!--Old Versions-->
<!-- <script src="./lib/jquery-3.2.1.min.js"></script> -->
<!-- <script src="./lib/bootstrap-3.3.7.min.js"></script> -->

<!--Other Scripts-->
<script src="./lib/d3-3.5.5.js"></script>
<script src="./lib/c3.min.js"></script>
<script src="./lib/typeahead.js"></script>
<script src="./lib/bootoast.js"></script>
<script src="./arcgis_js_api/library/3.25/3.25/init.js"></script>
<script src="./arcgis_js_api/library/4.16/init.js"></script>

<script>require(["app"],function() {
  require(["dojo/ready", "app/context/AppContext", "app/context/AppStarter"],
  function(ready, AppContext, AppStarter) {
    window.AppContext = new AppContext();
    ready(function() {
      esri.config.defaults.io.proxyUrl = "viewer/proxy.jsp";
      (new AppStarter()).startupApp();
    });
  });
});</script>
</body>
</html>

topic ArcGIS Project not working after Bootstrap Upgrade Error from Version 4 onwards (V3.37 Initial version) in ArcGIS JavaScript Maps SDK Questions

ArcGIS Project not working after Bootstrap Upgrade Error from Version 4 onwards (V3.37 Initial version)