Uncaught Type Error: Jh.panel is undefined

Questions
1

Hi guys,

in my index.html I use a left panel:

<div id=app>
  <div class="panel panel-left panel-cover panel-init">
    <div class="view panel-view">
    </div>
    ...

  </div>

</div>

After the panel, I use a appbar and below there is the “view view-main”-div element.

in my_app.js I use jQuery/ Dom7 to handle the onClick Event of an menu-Button.
I want to open/ close the left panel.

First I create the new view, as:

var PanelView = app.views.create('.panel-view', {
  url: '/left-panel/,
  restoreScrollTopOnBack: false
});

later, within the OnClick-Event I tried to get the panel, but it occures an error:

var panel = app.panel.get('.panel-left');
console.log(panel.opened);

leads to: Uncaught TypeError: Jh.panel is undefined

and while PanelView initialization, I got also the error:
Uncaught (in promise) Error: Error: Framework7: can’t create a View instance because el must be an HTMLElement oder Dom7 object

I hope, some of you could give me some inspiration. The whole aspect of using a routable left panel seemed so easy for me, but implementation occured some problems…

2

Do you use bundle version of Framework7 (which includes Panel component)?

It means there is no .panel-view such element in DOM at the moment when you call it

3

hi, thanks
In my index.html at the bottom I link to:
js/framework7.bundle.min.js
js/bundle.js

so, I use the bundle version of framework7, and also webpack to bundle .js and .css files.

okay, interesting. I guess, because the panel is declared in index.html, it should be mounted to DOM all the time?
Into the view-main I load the home.f7.html as a main component. maybe, this is the reason, why html elements of index.html are not hold in DOM any longer?

concering components:
I tried different options: My current version is: all the pages are .f7.html Files. There will be imported first in route.js. To be used as component for the specific path/ route.

import left_panel_nav from '../pages/left_panel_nav.f7.html';

...

{
  name: 'left-panel',
  path: 'left-panel',
  panel: {
    component: left_panel_nav,
    swipe: true,
    }, 
},
4

Still don’t get. Can you replicate the issue using template from this topic How to ask a good question on forum ?

If you use webpack, then app layout (including panel) should be loaded from app.f7.html component (main app component) and they are not initially available in DOM

5

okay, thanks a lot!

I am sorry. Yes, I will replicate again - probably tomorrow.

Okay, maybe that is my main problem. So, I will check out the way using app.f7.html

6

my problem concerning the left panel was:
because I am using “webpack” I have to import each module from framework7.
In my app.js file I added now:

import Panel from 'framework7/components/panel/panel.js';
Framework.use([Panel]);

see also: https://framework7.io/docs/custom-build.html go to “ES Modules”.