Can't transpile dependencies via "transpileDependencies" option

[dimensi]

Version

3.0.0-rc.5

Reproduction link

https://github.com/dimensi/broken-transpile-vue-cli

Steps to reproduce

1. Add swiper.
2. Set in vue.config.js option transpileDependencies: ["dom7", "ssr-window", "swiper"] by this recommendation
   
3. try to build project.

What is expected?

Transpile dependencies

What is actually happening?

Got tons of errors

---

At the first attempt to build the project, I received such an error.

  Error: /home/dimensi/projects/swiper-vue/public/index.html:119
  module.exports = function (it) {
                 ^
  TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

  - index.html:119 Module.<anonymous>
    /home/dimensi/projects/swiper-vue/public/index.html:119:16

  - index.html:122 Module.0/R4
    /home/dimensi/projects/swiper-vue/public/index.html:122:30

  - index.html:21 __webpack_require__
    /home/dimensi/projects/swiper-vue/public/index.html:21:30

  - index.html:19037 Object.Xbzi
    /home/dimensi/projects/swiper-vue/public/index.html:19037:16

  - index.html:21 __webpack_require__
    /home/dimensi/projects/swiper-vue/public/index.html:21:30

  - index.html:18340 Object.Oyvg
    /home/dimensi/projects/swiper-vue/public/index.html:18340:25

  - index.html:21 __webpack_require__
    /home/dimensi/projects/swiper-vue/public/index.html:21:30

  - index.html:19795 Object.f3/d
    /home/dimensi/projects/swiper-vue/public/index.html:19795:30

  - index.html:21 __webpack_require__
    /home/dimensi/projects/swiper-vue/public/index.html:21:30

  - index.html:852 Module.<anonymous>
    /home/dimensi/projects/swiper-vue/public/index.html:852:137

After this error, I went to issue to search for answers and found this answer #1248 (comment)
I'm set process.env.VUE_CLI_BABEL_TRANSPILE_MODULES = true in babel.config.js
and got new error

 Error: /home/dimensi/projects/swiper-vue/public/index.html:783
    var SYMBOL = wks(KEY);
                 ^
  TypeError: wks is not a function

  - index.html:783 IU Z.module.exports
    /home/dimensi/projects/swiper-vue/public/index.html:783:16

  - index.html:20312 Object.pIFo
    /home/dimensi/projects/swiper-vue/public/index.html:20312:28

  - index.html:21 __webpack_require__
    /home/dimensi/projects/swiper-vue/public/index.html:21:30

  - index.html:889 Object.KKXr
    /home/dimensi/projects/swiper-vue/public/index.html:889:1

  - index.html:21 __webpack_require__
    /home/dimensi/projects/swiper-vue/public/index.html:21:30

  - index.html:977 Object.KroJ
    /home/dimensi/projects/swiper-vue/public/index.html:977:1

  - index.html:21 __webpack_require__
    /home/dimensi/projects/swiper-vue/public/index.html:21:30

  - index.html:19063 Object.XKFU
    /home/dimensi/projects/swiper-vue/public/index.html:19063:16

  - index.html:21 __webpack_require__
    /home/dimensi/projects/swiper-vue/public/index.html:21:30

  - index.html:109 Object./SS/
    /home/dimensi/projects/swiper-vue/public/index.html:109:15

After that, I tried to set the module option: 'commonjs' and get another error

 Error: /home/dimensi/projects/swiper-vue/public/index.html:119
  module.exports = function (it) {
                 ^
  TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

  - index.html:119 Module.<anonymous>
    /home/dimensi/projects/swiper-vue/public/index.html:119:16

  - index.html:122 Module.0/R4
    /home/dimensi/projects/swiper-vue/public/index.html:122:30

  - index.html:21 __webpack_require__
    /home/dimensi/projects/swiper-vue/public/index.html:21:30

  - index.html:19037 Object.Xbzi
    /home/dimensi/projects/swiper-vue/public/index.html:19037:16

  - index.html:21 __webpack_require__
    /home/dimensi/projects/swiper-vue/public/index.html:21:30

  - index.html:18340 Object.Oyvg
    /home/dimensi/projects/swiper-vue/public/index.html:18340:25

  - index.html:21 __webpack_require__
    /home/dimensi/projects/swiper-vue/public/index.html:21:30

  - index.html:19796 Object.f3/d
    /home/dimensi/projects/swiper-vue/public/index.html:19796:30

  - index.html:21 __webpack_require__
    /home/dimensi/projects/swiper-vue/public/index.html:21:30

  - index.html:852 Module.<anonymous>
    /home/dimensi/projects/swiper-vue/public/index.html:852:137

How fix this?

[yyx990803]

Cannot reproduce. Cloned your project, did fresh install, serve and build works as intended.

[dimensi]

@yyx990803 did you uncomment code in babel.config.js?

[dimensi]

nice... i too clone my project again and now not have problem...
I can't understand what happened...
I rename folder from swiper-vue to broken-compile and error disappear.

[jacobg]

Me too. I am getting this when adding vuelidate-error-extractor, which has transitive dependency on get-value. get-value is not transpiled. Without adding get-value to transpileDependencies, Chrome 48 has error due to lack of full es6 support. When I add get-value to transpileDependencies, then I get the error you got: Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

Cloning into a new project does not fix the issue

[patrick-radius]

I have the same problem.
We have code that we share cross-projects in node_modules and want to transpile it using transpileDependencies but it doesn't work because it fails on non existing default imports from for example moment.
Without the transpilation the code does not work in IE.

[larscmagnusson]

Same problem here.. Me with vuex-cache