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.


#3

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


#4

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


#5

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.


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