Can't initialize any component

I have this on my master page

var myApp = new Framework7({
material: true,
});

After the new update, all the components that i have
“app= new Framework7” do not function and below is the error

Error: Framework7 is already initialized and can’t be initialized more than once at new Framework7

Can anyone help?

All your components have?

“app= new Framework7”

if that’s the case, its wrong. init f7 in main.js, app.js, or whatever name you have for your main js.

Error message is pretty clear here, it is not allowed to call new Framework7() more than once

Yes I understand but i dont know if it is the platform i am using or i am not doing something right, when I initialize from the master page using the previous version of F7, and use “data-” it does not work, but when i initialize on the page again it works fine.

Kindly find attached video link.

Video

read nolimits comment. i think you are doing something wrong. trying to initialize multiple F7 instances.

Cant watch the video.

this video is unavailable

url:

Yes nolimits comment is in regards to the latest update which gives me that error but the previous version was allowing me to create multiple instances.

sorry about the link.

video

Ok, now i see the video.
Your approach its wrong. you are creating multiples f7 instances. one for each page. also a new layout for each page.

My advice is to change the way you are working with F7.

you can have an index/master page. and on that page load other pages.using only one f7 instance and layout.
here you can see how to do it

why do you need multiples instances of f7? you can always share your f7 instance with something like

window.app = new Framework7({params})

Oh okay, yeah i see what you saying. However the Aquro platform has its structures like that, i will still need to create separate layouts for each page and use a (Page.Load) to load it into view but will give it a try. I dont actually create instances on every page, only for components that require or i want to use app methods. Such as the searchbar and panel and list deletion etc.

The challenge now is window.app = new Framework7({params}) only works with the previous version 3 of F7, it gives this error in the latest version when i try creating the searchbar with
“app.searchbar.create(parameters)” without initializing:

“Uncaught TypeError: Cannot read property ‘create’ of undefined” and this error when i initialize

So is there a way round this for now?

Hello @pvtallulah any update on this please?

Ernesto. I never used aquoro. Is it free? If thats the case will give it a try.

@pvtallulah it is no longer free but i can share my login details so you check it out kindly send me your email address, but is there a way to reference the app variable for instance in this method:
app.searchbar.create(parameters)

Since it throwing me the error i quoted above.

Hi all! i have the same issue, i try to describe it clearly.
I have an app with F7 3.6.7 and when i try to call a component like dialog.open(), there isn’t problem because the component are all in the Framework7 istance. (see image below)


(Excuse but i separate the reply in two because i am new user.)

but when i upgrade to F7 4.1.0 the component from the root of instance of F7 are disappeared! (see image below)

How i can, with the new release, have the previous istance with the new F7 4.1.0?

Thank you!

Can you show your script tag where you reference f7 js?

Good morning!

Here the code, i use meteor to build my app, and this is the entry point.

Template.mainLayout.onRendered(function () {

const app = new Framework7({
    root: "#app",
    statusbar: {
        iosOverlaysWebView: false,

        iosBackgroundColor: "#3b68b2",
        iosTextColor: "white",

        androidBackgroundColor: "#3b68b2",
        androidTextColor: "white",
    },
    toolbar: {
        hideOnPageScroll: false,
    },

    navbar: {
        hideOnPageScroll: false,
        iosCenterTitle: true,
    },
    panel: {
        swipe: "left",
        leftBreakpoint: 768,
        rightBreakpoint: 1440,
        swipeActiveArea: 50
    },
    view: {
        iosDynamicNavbar: false,
    },
    popup: {
        closeByBackdropClick: false,
    },
    router: false
});

let mainView = app.views.create('.view-main');

if (device.platform === "iOS") {

    scanNFCTagListener();
}

if (device.platform === "Android") {

    checkNFCAndroid(app);

}

let bool = true;

Tracker.autorun(function () {

    if (Meteor.status().connected === true && bool === false){

        app.dialog.close(); //<-- here there is the problem

        bool = true
    }

    if (Meteor.status().connected === false && bool === true){

        app.dialog.preloader(TAPi18n.__("connection")); // <-- and here

        bool = false;

    }


});

});

I think you are using the core f7. Try with bundel. Or show your index. Html

here we are :slight_smile:

<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover">

<title>Junction</title>

<link rel="stylesheet" href="https://cdn.materialdesignicons.com/3.2.89/css/materialdesignicons.min.css">
</head>

<body>

{{>mainLayout}}

</body>

ok, so that wasn’t helpful. show your js entry point. it should be like app.js or main.js, etc

This is my whole entry point, i install framework7 via npm and then I initialize the app here :slight_smile:

Template.mainLayout.onRendered(function () {

    getPreferredLanguage();

    const app = new Framework7({
        root: "#app",
        //theme : 'md',
        statusbar: {
            iosOverlaysWebView: false,

            iosBackgroundColor: "#3b68b2",
            iosTextColor: "white",

            androidBackgroundColor: "#3b68b2",
            androidTextColor: "white",
        },
        toolbar: {
            hideOnPageScroll: false,
        },

        navbar: {
            hideOnPageScroll: false,
            iosCenterTitle: true,
        },
        panel: {
            swipe: "left",
            leftBreakpoint: 768,
            rightBreakpoint: 1440,
            swipeActiveArea: 50
        },
        view: {
            iosDynamicNavbar: false,
        },
        popup: {
            closeByBackdropClick: false,
        },
        routes: false,
        router: false
    });

    // Expose Internal DOM library
    //var $$ = Dom7;

    //let mainView = app.views.create('.view-main');

    vrApp.set(app);

    //il modo in cui vengono chiamai i listener da android ad ios cambia, quindi devo attiverne uno qui per iOS
    if (device.platform === "iOS") {

        scanNFCTagListener();

        //threeDTouch()

    }

    if (device.platform === "Android") {

        checkNFCAndroid(app);

    }

    let bool = true;

    Tracker.autorun(function () {

        if (Meteor.status().connected === true && bool === false){

            app.dialog.close();

            bool = true
        }

        if (Meteor.status().connected === false && bool === true){

            app.dialog.preloader(TAPi18n.__("connection"));

            bool = false;

        }


    });


    });

ok, i need to see where you import/require framework7, ok?

eg:

import Framework7 from 'framework7'