Bootstrap modal require is not defined for ArcGIS server map

I am trying to open ESRI map in a Bootstrap modal. On the first time, it doesn't load the map (in the console I see the error "require is not defined"), but the second time, it works fine. If I open the map in a separate window, then it also works well each time.

My partial view looks like the following:

@{
    <link rel="stylesheet" href="https://js.arcgis.com/3.21/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.21/esri/css/esri.css">
    
    <script src="https://js.arcgis.com/3.21/"></script>
    <script>
        var map;

        require([
          "esri/map",
          "dojo/parser",
          "dojo/domReady!"
        ],
        function (
          Map,
          parser
        )
        {
            parser.parse();

            map = new Map("map", {
                basemap: "streets",
                center: [5.79, 50.97], // lon, lat
                zoom: 16,
                slider: false
            });
        });
   </script>
}

<div class="modal-header">
    <a class="close" data-dismiss="modal">&times;</a>
    <h4>DrawProjectLocation</h4>
</div>
<div class="modal-body">
    <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer"  data-dojo-props="design:'headline', gutters:false" style="width:100%; height:100%;">      
        <div id="map" class="roundedCorners" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
            
        </div>
        <div id="footer" class="roundedCorners" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'">
            <div id="editorDiv"></div>
        </div>
    </div>
</div>
<div class="modal-footer">
    <span id="info" style="position:absolute; left:15px; bottom:15px; color:#000; z-index:100"></span>
    <button type="submit" class="btn btn-success" id="submitButton">Save</button>
    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>

I tried to include require.js in my partial view, but it didn't help.

What's going wrong here?

Adding JS for ArcGIS on main view instead of the partial view. Since RequireJS is being loaded asynchronously, so other scripts/functions don't wait until it's loaded completely.

Another workaround is to load the bootstrap modal by setting up configurations for RequireJS to make sure all the required scripts are loaded initially.

An example can be found here: FISHTANK — Loading Bootstrap 3's JavaScript Components With RequireJS