Recommended babel/webpack config?

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.

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

@spiffytech Were you able to resolve this issue? I’m having the exact same problem.

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

Thanks @nolimits4web. Have you gotten a version working with vue cli 3? That works a bit differently, and has this issue: https://github.com/vuejs/vue-cli/issues/1568

I had to work around it by adding the following code to my build script in order to convert path-to-regexp to es module format:

// Framework7 has a transitive dependency on path-to-regexp,
// which is declared as a commonjs module. This breaks build
// when we transpile these dependendies, so let's hand jamb
// convert it to es6 module.
// See this issue: https://forum.vuejs.org/t/how-do-i-handle-a-transitive-dependency-that-is-not-transpiled-from-es6-to-es5/48440/5
const pathToRegexpPath = path.resolve(__dirname, 'node_modules/framework7/node_modules/path-to-regexp/index.js')
const pathToRegexp = fs.readFileSync(pathToRegexpPath).toString()
const pathToRegexpUpdated = pathToRegexp.replace(
`module.exports = pathToRegexp
module.exports.parse = parse
module.exports.compile = compile
module.exports.tokensToFunction = tokensToFunction
module.exports.tokensToRegExp = tokensToRegExp`,
`export default pathToRegexp
pathToRegexp.parse = parse
pathToRegexp.compile = compile
pathToRegexp.tokensToFunction = tokensToFunction
pathToRegexp.tokensToRegExp = tokensToRegExp`)
fs.writeFileSync(pathToRegexpPath, pathToRegexpUpdated)

I don’t understand really why the Vue core team thinks they can’t fix this issue.

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