Error: Framework7: can't create a View instance because the selector "#view-home" didn't match any element


I’m updating my app to V5 and it’s awesome so far, but I ran into this error message:

Error: Framework7: can’t create a View instance because the selector “#view-home” didn’t match any element

I don’t understand why this happened. I believe I declared my views correctly. I consulted the docs, nothing seems to have changed.

Here’s the code inside .views div (the app is using a tabbed interface) on app.f7.html:

  <div id="view-home" class="view view-main view-init tab tab-active" data-url="/">

  <div id="view-take-picture" class="view view-init tab" data-view="take-picture" data-url="/take-picture/">

      <div id="view-me" class="view view-init tab" data-view="me" data-url="/me/">

Here’s what’s on routes.js:

import HomePage from '../pages/home.f7.html';
import TakePicturePage from '../pages/take-picture.f7.html';
import MePage from '../pages/me.f7.html';

var routes = [
    path: '/',
    component: HomePage,
    path: '/take-picture/',
    component: TakePicturePage,
    path: '/me/',
    component: MePage,
    path: '(.*)',
    component: NotFoundPage,

Then on app.js:

var homeView = app.views.create('#view-home', {
  url: '/',
  name: 'home',

var takepictureView = app.views.create('#view-take-picture', {
  url: '/take-picture/',
  name: 'takepicture'

var meView = app.views.create('#view-me', {
  url: '/me/',
  name: 'me'

Can someone tell me what I did wrong?

Thanks in advance!

I guess you are using Main App Component concept then:

It says:

Also note that main app component will be mounted (added to DOM) BEFORE app initialization process finished. So if you need to call Framework7 APIs immediately, use $f7ready callback:

Also your views already have view-init class -> it means they are auto initialized, so you don’t need to create views with app.views.create

I did some tests and app.views.create was indeed no longer needed! :slight_smile:


1 Like