Subpages not showing up as children in mainnavigation (Typo3)

Question

I have several pages with subpages in my pagetree as shown below.

My pagetree with subpages

However, the links to the subpages do not seem to be clickable.

I have implemented my navigation in Fluid, as per the code below (which is in the default.html file in the Layouts folder):

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="{rl}">Company Name</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>


    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <f:for each="{mainnavigation}" as="mainnavigationItem">
                <f:if condition="{mainnavigationItem.children}">
                    <f:then>
                        <li class="nav-item {f:if(condition: mainnavigationItem.active, then:'active')} dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                {mainnavigationItem.title}
                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                <f:for each="{mainnavigationItem.children}" as="child">
                                    <a class="dropdown-item" href="{child.link}" target="{child.target}" title="{child.title}">{child.title}</a>
                                </f:for>
                            </div>
                        </li>
                    </f:then>
                    <f:else>
                        <li class="nav-item {f:if(condition: mainnavigationItem.active, then:'active')}">
                            <a class="nav-link" href="{mainnavigationItem.link}" target="{mainnavigationItem.target}" title="{mainnavigationItem.title}">{mainnavigationItem.title} <span class="sr-only">(current)</span></a>
                        </li>
                    </f:else>
                </f:if>
            </f:for>
        </ul>
    </div>
</nav>

And the mainnavigation variable is defined in the configuration of my extension in setup.typoscript as shown below. Note that levels is set to 2, in order to render the subpages.

  dataProcessing {
            10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
            10 {
                references.fieldName = media
            }
            20 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
            20 {
                levels = 2
                includeSpacer = 1
                as = mainnavigation
            }
        }

As you can see in the picture below, an arrow is added for the subpages. When I click this arrow or the page title, nothing happens however.

The menu with dropdowns

Additionally I am getting this error in the webconsole:

Uncaught TypeError: Cannot read property 'fn' of undefined
at util.js:55
at bootstrap.min.js:6
at bootstrap.min.js:6

Which refers to:

$.fn.emulateTransitionEnd = transitionEndEmulator

Answer 1

Turns out I was not importing JQuery correctly in setup.typoscript. Once I added the following code to page, the subpages popped up correctly:

 includeJSFooter {
   jquery = https://code.jquery.com/jquery-3.3.1.slim.min.js
   jquery.external = 1
   popper = https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js
   popper.external = 1
   bootstrap = https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js
   bootstrap.external = 1

}