framework7io/framework7 · error · Error

Framework7 is already initialized and can't be initialized m

Error message

Framework7 is already initialized and can't be initialized more than once

What it means

Framework7 enforces a singleton pattern: only one Framework7 app instance may exist per page. The constructor checks `Framework7.instance` and throws immediately if an instance is already stored. This prevents conflicting global state (root elements, event bindings) from multiple apps.

Source

Thrown at src/core/components/app/app-class.js:20

import { getWindow, getDocument } from 'ssr-window';
import { extend, nextFrame } from '../../shared/utils.js';
import { getDevice } from '../../shared/get-device.js';
import { getSupport } from '../../shared/get-support.js';
import Framework7Class from '../../shared/class.js';
import EventsClass from '../../shared/events-class.js';
import ConstructorMethods from '../../shared/constructor-methods.js';
import ModalMethods from '../../shared/modal-methods.js';
import $ from '../../shared/dom7.js';
import loadModule from './load-module.js';
import $jsx from '../../shared/$jsx.js';

class Framework7 extends Framework7Class {
  constructor(params = {}) {
    super(params);
    // eslint-disable-next-line
    if (Framework7.instance && typeof window !== 'undefined') {
      throw new Error("Framework7 is already initialized and can't be initialized more than once");
    }
    const device = getDevice({ userAgent: params.userAgent || undefined });
    const support = getSupport();

    const passedParams = extend({}, params);

    // App Instance
    const app = this;

    app.device = device;
    app.support = support;

    const w = getWindow();
    const d = getDocument();

    Framework7.instance = app;

    // Default

View on GitHub (pinned to 6557591266)

Solutions

1. Guard creation: reuse the existing instance instead of constructing a new one
2. If a fresh instance is truly needed, delete Framework7.instance first (window handling applies) before re-initializing
3. Move init code so it runs exactly once (module top-level, DOMContentLoaded guard, or a boolean flag)
4. In HMR setups, dispose/teardown the app on module unload before re-creating

Example fix

// before
const app = new Framework7({ ... });

// after
const app = Framework7.instance || new Framework7({ ... });

if (!Framework7.instance) {
  const app = new Framework7({ /* ... */ });
}

function isAppCreated() {
  return typeof Framework7 !== 'undefined' && !!Framework7.instance;
}

let app;
try {
  app = new Framework7(params);
} catch (e) {
  if (/already initialized/.test(e.message)) app = Framework7.instance;
  else throw e;
}

When it happens

Trigger: Calling `new Framework7({...})` a second time while a previous instance exists (e.g. `Framework7.instance` set), typically during hot module reload, re-running an init script on navigation, or double-including the init code.

Common situations: Hot reload in dev without disposing the old app; calling init in both a global script and a page-specific script; re-executing an inline script on SPA route change; accidentally importing the bundle twice.

Related errors

• Framework7: TextEditor: wrong "buttons" parameter format
• Framework7: can't create a View instance because ${typeof el
• Framework7: it is not allowed to use router methods on globa
• Framework7: There is no View with "${anotherViewName}" name
• Framework7: "name" or "path" parameter is required

AI-assisted analysis of framework7io/framework7@6557591266 (2026-09-02). Data as JSON: /api/errors/66599aaf548aa9af. Report an issue: GitHub.