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

Hello,

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>

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

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

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',
  stackPages:true
});

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:

https://framework7.io/docs/router-component.html#main-app-component

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:

Thanks!

1 Like