Recommended babel/webpack config?


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