Ion-menu : Cannot read property 'classList' of undefined

I have a base layout template that I use for most of the pages of my app

<template>

	<ion-page :data-simulating="(isGameSimulating) ? 'yes' : 'no'" id="main-content">
		<ion-header>
			
		</ion-header>
		<ion-content>
			<slot />
		</ion-content>

		<ion-segment slot="bottom" id="FooterMenu" :value="pageId">
			<ion-segment-button @click="gotoPage('athletes')" :dataselected="(pageId == 'athletes') ? true : false" value="athletes">
				<ion-icon :icon="people"></ion-icon>
				<ion-label>Athletes</ion-label>
			</ion-segment-button>
			<ion-segment-button @click="gotoPage('training')" :dataselected="(pageId == 'training') ? true : false" value="training">
				<ion-icon :icon="podium"></ion-icon>
				<ion-label>Training</ion-label>
			</ion-segment-button>
			<ion-segment-button @click="gotoPage('lobby')" :dataselected="(pageId == 'lobby') ? true : false" value="lobby">
				<ion-icon :icon="home"></ion-icon>
				<ion-label>Lobby</ion-label>
			</ion-segment-button>
			<ion-segment-button @click="gotoPage('scouting')" :dataselected="(pageId == 'scouting') ? true : false" value="scouting">
				<ion-icon :icon="eye">
					<ion-badge>6</ion-badge>
				</ion-icon>
				<ion-label>Scouting</ion-label>
			</ion-segment-button>
			<ion-segment-button @click="gotoPage('calendar')" :dataselected="(pageId == 'calendar') ? true : false" value="calendar">
				<ion-icon :icon="calendar"></ion-icon>
				<ion-label>Calendar</ion-label>
			</ion-segment-button>
		</ion-segment>

	</ion-page>
</template>

I use a ion-segment to navigate through pages, it works perfectly.

But if I add a ion-menu component at the top of my template (even an empty ion-menu)

<ion-menu side="start" menu-id="first" content-id="main-content"></ion-menu>

I get the following error every time I try to navigate to a page I have previously visited :

Uncaught TypeError: Cannot read property 'classList' of undefined
    at eval (index.esm.js?d867:1088)

The error comes from ionic/vue on this line of code

requestAnimationFrame(() => enteringEl.classList.remove('ion-page-invisible'));

2 posts - 2 participants

Read full topic