[solved] Help to migrate to webpack

1

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:

app.js

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

COMPONENT

<template>
 ...
</template>
<script>
  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
      }
    }
  }
  </script>

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!.

2

Ok, I found a way to do it:

for app:

const app = this.$router.app;

for Dom7:

this.$el.find('.test').html();

Is this the best way to do it?

EDIT

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

in this way I should not modify my js

1 Like
3

const app = this.$app;
https://framework7.io/docs/router-component.html#component-context

2 Likes
4

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.$;

etc

5

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