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