Upgrade Framework7 Router "Uncaught (in promise) Error: TypeError: t is not a function"

Questions
1

Hello

I’m trying to upgrade my very old Framework7 v3 App, everything work up to v5 but i’m stuck at v6.

I get the “Uncaught (in promise) Error: TypeError: t is not a function” error with my Router config.

Can you say me if you know how to correct this please ?

Framework7 download from framework7 CDN by jsDelivr - A free, fast, and reliable Open Source CDN

My index.html

<script src="lib/template7.min.js"></script>
<script src="lib/framework7/js/framework7-bundle.min.js"></script>
<link rel="stylesheet" href="lib/framework7/css/framework7-bundle.min.css">

My app.js

Template7.global = {
    android: isAndroid,
    iOS: isIOS
};
app = new Framework7({
	debug: DEBUG,
	el: '#app',
	//root: '#app',
	theme: isAndroid ? 'md': 'ios',
	routes: routes,
	statusbar: {
		enabled: true
	},
	touch: {
		disableContextMenu: false
	},
	data: function () {
		return {
			appVersion: appVersion,
			deviceName: isIOS ? 'iOS' : 'Android',
			debug: DEBUG,
			feedbackEmail: feedbackEmail
		};
	}
});

My config.js with Routes

var routes = [

	// Index (empty)
	{
		path: '/tools/',
		//async: function(routeTo, routeFrom, resolve, reject) {         
		async: function({routeTo, routeFrom, resolve, reject}) {         
			if (db = connectDb()) {
				db.transaction(function(tx) {
					let query = 'SELECT................';
					tx.executeSql(query, [], function(tx, results) {
						let cities = [];
						...for(let i=0; i<results.rows.length; i++) ... cities.push({....});
						resolve(
							{
								componentUrl: 'pages/index.html'
							},
							{
								context: {
									cities: cities,
								}
							}
						);
					});
				},
				function(error) {
					alert('Transaction error: ' + error.message);
				},
				// On transaction success
				function() {});
			}
		}
	}
	
];

My pages/index.html

<template>
	<div class="page">
		<div class="navbar">
			<div class="navbar-bg"></div>
			<div class="navbar-inner">
				<div class="left">...</div>
				<div class="center sliding">
					<div class="title">....</div>						
				</div>
				<div class="right">...</div>
			</div>
		</div>
		<div class="searchbar-backdrop"></div>
		<div class="page-content">.....</div>
	</div>
</template>
<script>
	return {
		data: function () {
			return {
				tools: function() 
					return ...;
				}
			}
		},
		methods: { },
		pageInit: function() { ... },
		pageAfterIn: function (e, page) { ... }
	};
</script>

Best regards