[solved] Help to migrate to webpack

I’m migrating my app to Webpack, so download the webpack template:

but I have a problem, when I load my first component I can not get to the “$$” or “app”.
my code:


import Framework7 from 'framework7/framework7.esm.bundle.js';
import Dom7 from 'dom7/dist/dom7.js';
import 'framework7/css/framework7.css';
import './css/icons.css';
import './css/app.css';
import routes from './routes.js';

const $$ = Dom7;
const app = new Framework7({
  root: '#app',
  name: 'stock',
  id: 'ar.com.owsoft.stock',
  routes: routes,

const test = app.dialog.create({
text:"dialog on app.js is working"
test.open(); //this dialog is displayed correctly


  export default {
    on: {
      pageInit: function () {
        console.log("testing dialog:");
        const test = app.dialog.create({
          text:"dialog on app.js is NOT working"
        test.open(); //this dialog is NOT WORKING

the error for app is:
Uncaught TypeError: Cannot read property ‘create’ of undefined

the error for Dom7 is:
inicio.f7.html:6 Uncaught ReferenceError: $$ is not defined

Thanks for the help!.

Ok, I found a way to do it:

for app:

const app = this.$router.app;

for Dom7:


Is this the best way to do it?


solve it using:
window.app = app;
window.$$ = Dom7;

in this way I should not modify my js

1 Like

const app = this.$app;


Better don’t use global vars like window.app in Webpack. Webpack operates with ES modules which are scoped, and it is good. So just use the correct API.

const app = this.$app;
const $$ = this.$;


I put “resolved” and you also answer me? :heart_eyes::heart_eyes:
Thanks Vladimir! and thanks shastox!