transpileDependencies problem

vue-cli

#1

I’m using Framework7 with Vue. F7 has ** option, witch is not supported in iOS 10 (OR 9?). so i want to use
transpileDependencies to transpile to Math.pow. But I got the following error.

TypeError: Cannot assign to read only property ‘exports’ of object ‘#’

Just my GUESS: Seems it first transpiled F7 to common-js? Then when in my main.js, it cannot be imported because require and import cannot be mixed?

what shall I do?

thanks.


#2

You make it easier for people if you link to the package you want to transpile as well as show the exact config you are using and what you are importing into your app.


#3

Hi LinuxBorg,

Thanks for the reply. I uploaded a repository here.

Framework7 (https://github.com/framework7io/framework7) uses ** operator in many files, which doesn’t work in some browsers(eg. iOS safari 10). ** written in main.js is transpiled to Math.pow(), but those in dependencies, not.

I added transpileDependencies option in vue.config.js,

...
transpileDependencies: [
  'framework7',
], 
...

Then I got the following error when ‘npm run build/serve’

 ERROR  Failed to compile with 1 errors                                                                                                        15:21:15

  Error: /Users/echo.chen/Projects/open-source/framework7/f7-vue-test/public/index.html:625
  module.exports = function (it) {
                 ^
  TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

  - index.html:625 Module.<anonymous>
    /Users/echo.chen/Projects/open-source/framework7/f7-vue-test/public/index.html:625:16

  - index.html:628 Module.4cee
    /Users/echo.chen/Projects/open-source/framework7/f7-vue-test/public/index.html:628:30

  - index.html:21 __webpack_require__
    /Users/echo.chen/Projects/open-source/framework7/f7-vue-test/public/index.html:21:30

  - index.html:1420 Object.69d8
    /Users/echo.chen/Projects/open-source/framework7/f7-vue-test/public/index.html:1420:16

  - index.html:21 __webpack_require__
    /Users/echo.chen/Projects/open-source/framework7/f7-vue-test/public/index.html:21:30

  - index.html:1047 Object.5616
    /Users/echo.chen/Projects/open-source/framework7/f7-vue-test/public/index.html:1047:25

  - index.html:21 __webpack_require__
    /Users/echo.chen/Projects/open-source/framework7/f7-vue-test/public/index.html:21:30

  - index.html:19953 Object.cf54
    /Users/echo.chen/Projects/open-source/framework7/f7-vue-test/public/index.html:19953:30

  - index.html:21 __webpack_require__
    /Users/echo.chen/Projects/open-source/framework7/f7-vue-test/public/index.html:21:30

  - index.html:1108 Module.<anonymous>
    /Users/echo.chen/Projects/open-source/framework7/f7-vue-test/public/index.html:1108:137


 ERROR  Build failed with errors.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vs@0.1.0 build: `vue-cli-service build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vs@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/echo.chen/.npm/_logs/2018-09-19T07_21_15_333Z-debug.log

#4

anyone could help On this?


#5

Hi all, I’m still looking for the solution here. GUI QIU.


#6

After hours (quite too much) trying to figure out how to configure webpack with vue-cli 3 for F7, I gave up with its node modules.

I just downloaded (or cloned) the F7 github repo, then importing it transpiles it and seems to work well in mobile safari.

import Framework7 from './relative-path-to-framework7-master/packages/core'
import Framework7Vue from './relative-path-to-framework7-master/packages/vue'
import './relative-path-to-framework7-master/packages/core/css/framework7.css'
import 'framework7-icons/css/framework7-icons.css'
import 'material-design-icons/iconfont/material-icons.css'
import 'font-awesome/css/font-awesome.css'

Framework7.use(Framework7Vue)

#7

@vdcrea F7 vue webpack template updated. It now could transform **.

And for vue-cli, I found that with transpileDependencies in vue.config.js, you also need to change babel preset to @babel/preset-env, then ** in F7 will be transformed.

babel.config.js:

module.exports = {
  "presets": [
    '@babel/preset-env'
  ],
}

vue.config.js

....
  transpileDependencies: [
    'framework7',
    'framework7-vue',
    'template7',
    'dom7',
    'ssr-window'
  ], 
....

Not clear about the original @vue/app preset. This “solution” means some settings need to be there, working with @vue/app and could do the transform tricks.

For now, I will keep @babel/preset-env. @vdcrea if you could find the right settings working with @vue/app, please let me know. thanks.


#8

Hi, and thanks, got it working now with vue cli 3, the same way you did. Reading the doc it seems that @vue/app includes @babel/preset-env + jsx + code splitting (dynamic import), but it seems to me that it doesn’t work well with Cordova. F7 router transpiled with this preset fails.


#9

When transpiling Framework 7, I get a separate error:

index.js?d15c:4 Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
    at Module.eval (index.js?d15c:4)
    at eval (index.js:382)
    at Module../node_modules/framework7/node_modules/path-to-regexp/index.js (app.js:6046)
    at __webpack_require__ (app.js:725)
    at fn (app.js:102)
    at eval (router-class.js:23)
    at Module../node_modules/framework7/modules/router/router-class.js (app.js:5950)
    at __webpack_require__ (app.js:725)
    at fn (app.js:102)
    at eval (router.js?f5e5:1)

I think it’s because path-to-regexp is in CommonJS format. Did you have this issue? How did you deal with it?


#11

You would have to use require() instead of import, but I assume you don’t have control over that?


#12

@LinusBorg I ended up monkey patching it by adding the following to the top of vue.config.js:

// 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)

It does not work to have framework7 use require() instead of import(), because it’s one of the transpileDependencies. You actually posted about that issue here: