Framework7-core (webpack.config.js) - How to add another html page and its JS file properly

Questions
1

Hi Guys,

Hope you are all fine. I’m using F7-core and I’m having trouble adding a new html (vouchers.f7.html) and JS (vouchers.js) file.

I’ve already added the new html file in my routes.js as follows

{
    name: 'vouchers',
    path: '/vouchers/',
    url: '../pages/vouchers.f7.html',
    component: '../pages/vouchers.f7.html'
  },

However, I’m still redirecting to Not found page upon clicking the link.
In addition, I’ve seen a tutorial on this forum that you need to add the js file on webpack.config.js. I’ve created my config like this

entry: {
    app: [ 
      './src/js/app.js',
      './src/js/vouchers.js' <<----- this is the JS file
    ],
  },

This was a success (The alert(“test”) triggers upon loading the page. However, I wasn’t able to run this code on the voucher js file

app.on('pageInit', function (page) {
    if (page.name === "vouchers") {
        console.log("voucher js loaded");
        alert("voucher js loaded");
    }
});

The code above was returning an error the the app is not a function. This isn’t happening on my app.js. Could you kindly guide me on this? I’m quite new on using f7.

2

You shouldn’t add it in web pack config. Look how other pages are done in project you created with CLI.

It is in your routes

import Vouchers from 'path/to/vouchers.f7.html';
// route
{
    name: 'vouchers',
    path: '/vouchers/',
    component: Vouchers,
  },
1 Like
3

Thanks nolimits4web! You’re a life saver! I was able to set my route successfully.

Could you guide me on this one? I have a js file named “voucher.js” which contains the following code.

alert("JS LOAD TEST");
app.on('pageInit', function (page) {
    if (page.name === "vouchers") {
        alert("Voucher page loaded!");
    }
});

The question is how do I import it? I tried adding

import VoucherJS from './vouchers.js';

on my app.js file. This triggers the alert(“JS LOAD TEST”); However, I’m getting a following error on the next line of code

Uncaught TypeError: app.on is not a function
at eval (vouchers.js:2)
at Object…/src/js/vouchers.js (app.js:4803)
at webpack_require (app.js:790)
at fn (app.js:101)
at eval (app.js:13)
at Module…/src/js/app.js (app.js:4756)
at webpack_require (app.js:790)
at fn (app.js:101)
at eval (webpack:///multi_(:8080/webpack)-dev-server/client?:3:18)
at Object.1 (app.js:4934)

It seems that it doesn’t recognize my f7 initialization on my app.js. Could you share an insight here? Thank you.