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.
- Framework7 v8
- App Type : www + pwa
- Framework7 Core
- Bundler : No bundler
- 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’
or
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?
app.js
//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
app.loginScreen.close('#my-login-screen');
// Alert username and password
//app.dialog.alert('Username: ' + username + '<br/>Password: ' + password);
app.dialog.alert(Capacitor.getPlatform());
});
routes.js
//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 = router.app;
// Show Preloader
app.preloader.show();
// 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: 'http://framework7.io',
},
{
title: 'Framework7 Forum',
url: 'http://forum.framework7.io',
},
]
};
//user.lastName = Capacitor.getPlatform();
// Hide Preloader
app.preloader.hide();
// Resolve route to load page
resolve(
{
componentUrl: './pages/request-and-load.html',
},
{
props: {
user: user,
}
}
);
}, 1000);
},
},
// Default route (404 page). MUST BE THE LAST
{
path: '(.*)',
url: './pages/404.html',
},
];
