Framework7 with Capacitor plugin

I am newbie on “Capacitor” and just 1 to 2 years experience on Framework7. I have a problem on loading Capacitor plugin on web browser (e.g. Chrome) and working fine on Android by using same source coding. For instance, I create fw7 project at the following status.

  1. Framework7 v8
  2. App Type : www + pwa
  3. Framework7 Core
  4. Bundler : No bundler
  5. Framework7 custom build: disable

After creating fw7 project, add capacitor/core, capacitor/cli and add android platform. On VSCode, npx cap sync, then run android on emulator. I don’t add any statement:

a) import { Capacitor } from ‘@capacitor/core’
b) const { Capacitor } = require(‘@capacitor/core’)

on top of app.js or routes.js. It works fine on Android emulator. However, it is failed to load Capacitor.getPlatform() when I ran it on browser (e.g. Chrome). Then I added statement ïmport" on top of app.js or routes.js, it appeared error ““Uncaught SyntaxError: Cannot use import statement outside a module””. Or I added statement “require”, it showed error ““Uncaught ReferenceError: require is not defined””.

How can I solve it?


//import { Cappacitor } from '@capacitor/core';
//const { Cappacitor } = require('@capacitor/core');

var $ = Dom7;

var app = new Framework7({
  name: 'My App', // App name
  theme: 'auto', // Automatic theme detection

  el: '#app', // App root element

  // App store
  store: store,
  // App routes
  routes: routes,
// Login Screen Demo
$('#my-login-screen .login-button').on('click', function () {
  var username = $('#my-login-screen [name="username"]').val();
  var password = $('#my-login-screen [name="password"]').val();

  // Close login screen

  // Alert username and password
  //app.dialog.alert('Username: ' + username + '<br/>Password: ' + password);


//import { Cappacitor } from '@capacitor/core';
//const { Capacitor } = require("@capacitor/core");

var routes = [
    path: '/',
    url: './index.html',
    path: '/about/',
    url: './pages/about.html',
    path: '/form/',
    url: './pages/form.html',

    path: '/dynamic-route/blog/:blogId/post/:postId/',
    componentUrl: './pages/dynamic-route.html',
    path: '/request-and-load/user/:userId/',
    async: function ({ router, to, resolve }) {
      // App instance
      var app =;

      // Show Preloader;

      // User ID from request
      var userId = to.params.userId;

      // Simulate Ajax Request
      setTimeout(function () {
        // We got user data from request
        var user = {
          firstName: 'Vladimir',
          lastName: 'Kharlampidi',
          //lastName: Capacitor.getPlatform(),
          about: 'Hello, i am creator of Framework7! Hope you like it!',
          links: [
              title: 'Framework7 Website',
              url: '',
              title: 'Framework7 Forum',
              url: '',

        //user.lastName = Capacitor.getPlatform();

        // Hide Preloader

        // Resolve route to load page
            componentUrl: './pages/request-and-load.html',
            props: {
              user: user,
      }, 1000);
  // Default route (404 page). MUST BE THE LAST
    path: '(.*)',
    url: './pages/404.html',

My advice is to use Ionic plugin for VS code. Except the initial stuff done via F7 CLI, i use the Ionic plugin to build and deploy the app, generate assets, run emulators etc.

Since Capacitor is built by Ionic team, the plugin has great Capacitor support and it is super useful.

Thanks for your replied!

I have already installed Ionic VS Code Extension. The fact is that it is working properly on app for Android & IOS, just cannot load capacitor plugin for browser (web Chrome). I have 2 questions on my case.

  1. Capacitor plugin are located at node_modules. May it be loaded at path “@capacitor/core”?
  2. I am using Framework7 v8 core without bundler. How can I use “import” or “require” on javascript?
  3. As I mentioned that my project is running fine on Android & IOS, the Capacitor/core plugin is automatically loaded (needn’t to specify import or require) and then the function Capacitor.getPlatform() will be worked. However, it is failed to load Capacitor.getPlatform on browser platform. It seems that the plugin is not loaded. So I manually loaded the plugin at app.js by using “import” or “require” but no success. How can I use “import” or “require” on fw7?

I found a solution, reinstall the Ionic cli can be solved.