I am using FW7 Core (with no Webpack) and I keep getting
Uncaught (in promise) Error: TypeError: Cannot read properties of null (reading 'clientTop')
error with just a basic main app component setup:
app.js
var app = new Framework7({ componentUrl: './pages/home.html', })
index.html: empty app container:
<div id="app"></div>
home.html:
<template>
<div id="app">
<div id="view-home" class="view view-main view-init">
<div class="page">
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner">
<div class="title">${title}</div>
</div>
</div>
<div class="page-content">
<a @click=${openAlert}>Open Alert</a>
<div class="list simple-list">
<ul>
${names.map((name) => $h`
<li>${name}</li>
`)}
</ul>
</div>
</div>
</div></div>
</div>
</template>
<style>
.red-link {
color: red;
}
</style>
<script>
// script must return/export component function
export default (props, { $f7ready, $f7, $on }) => {
const title = 'Component Page';
const names = ['John', 'Vladimir', 'Timo'];
const openAlert = () => {
$f7.dialog.alert('Hello world!');
}
$on('pageInit', () => {
// do something on page init
$f7.dialog.alert('Hello!');
});
$on('pageAfterOut', () => {
// page has left the view
$f7.dialog.alert('Hello!');
});
$f7ready(() => {
// now it is safe to call Framework7 APIs
$f7.dialog.alert('Hello!');
})
// component function must return render function
return $render;
}
</script>
I think there is something fundamentally wrong, I would appreciate any further explanations! Thanks for your help!