Simple main app component: TypeError: Cannot read properties of null (reading 'clientTop')

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!

How are you previewing your project, with a http server or by file?

var app = new Framework7({
  el: '#app', // required
  componentUrl: './pages/home.html',
});

from docs => App / Core | Framework7 Documentation

Parameter   => el
Type        => string
Default	    => body
Description => App root element.
               If you main app layout is not a direct child of the <body>
               then it is required to specify root element here
1 Like

Previewing with a http server (npm run serve)

That was missing, now it works! Thank you!