Recommended babel/webpack config?

Questions
1

What’s the recommended way to load Framework7 and transform it for older browsers?

I’ve created a Vue / phonegap project with vue-cli. When running on older devices, I get errors about object spread syntax inside Framework7. I added @babel/plugin-transform-runtime to my babelrc and added this Babel loader config to my vue.config.js, and now I get the below error.

const path = require('path');

module.exports = {
  configureWebpack: {
    module: {
      rules: [{
        test: /\.js$/,
        include: [
          path.resolve(__dirname, 'node_modules/dom7'),
          path.resolve(__dirname, 'node_modules/template7'),
          path.resolve(__dirname, 'node_modules/framework7'),
          path.resolve(__dirname, 'node_modules/framework7-vue'),
        ],
        use: [{
          loader: 'babel-loader',
          options: {
            presets: [['@vue/app']]
          }
        }]
      }]
    },
  },
}

Error:

Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
    at Module.<anonymous> (app.js:29488)
    at Module../node_modules/framework7/node_modules/path-to-regexp/index.js (app.js:29855)
    at __webpack_require__ (app.js:717)
    at fn (app.js:99)
    at Module../node_modules/framework7/modules/router/router-class.js (app.js:26365)
    at __webpack_require__ (app.js:717)
    at fn (app.js:99)
    at Module../node_modules/framework7/modules/router/router.js (app.js:27809)
    at __webpack_require__ (app.js:717)
    at fn (app.js:99)

Google says this error is because a module uses both ES6 import and module.exports.

2

Hi, I have a base template for f7-vue apps (cordova/phonegap), I use it for my developer.
its f7-v2-value it has, moment, lodash vue. cookie, pug, vuex, etc, maybe you don’t use all the dependencies I use, but you can see how webpack/bable is configured. It’s based on vue-webpack template and f7-v2 template.
I also mix f7 and f7-vue, I find it easier to customize f7 code style rather than f7-vue.

https://github.com/pvtallulah/base-vue-f7v2-template

4

Check official Webpack templates http://framework7.io/templates/, they are configured correctly

6

No, it is not for Vue CLI, and one reason for this is their bugs and issues. And it is easy to tweak it (add/remove loaders, babel plugins, etc.)

1 Like