Search code examples
iosvuejs2babeljstranspilervue-cli-3

iOS 9: “unexpected use of reserved word ‘let’ in strict mode” + “Can’t find variable: fetch”. Transpiling issues? How to fix?


Using VueCli 3 "from the box", I found, that my code does not work on my iPad 2 (iOS 9.3) and using iOS 9.3 emulator I got the next errors:

1) "unexpected use of reserved word 'let' in strict mode". For a test purpose I found, which external component produces this error and temporary removed it, but then I got another error...

2) "Can't find variable: fetch". I found that fetch is used by apollo-link.

It seems, that for some reason my project can not be transpiled, however it looks like I tried everything what is mentioned on this doc page.

What I tried to do in order to transpile the project somehow:

1) I added iOS >= 9.3 to .browserlistrc -> nothing changed;

2) Added import '@babel/polyfill' to main.js and

module.exports = {
  presets: [
    ['@vue/app', { useBuiltIns: "entry" }]
  ]
} 

to babel.config.js -> nothing changed;

3) Tried to turn on/off modern mode -> nothing changed;

4) Tried to add

module.exports = {
  ...
  transpileDependencies: ['vue-apollo']
}

to vue.config.js -> nothing changed.

Just in case, my dependencies:

"dependencies": {
  "bootstrap-vue": "^2.0.0-rc.11",
  "register-service-worker": "^1.5.2",
  "vue": "^2.5.17",
  "vue-apollo": "^3.0.0-beta.11",
  "vue-awesome-swiper": "^3.1.3",
  "vue-draggable-resizable": "git+https://github.com/mauricius/vue-draggable-resizable.git#develop",
  "vue-router": "^3.0.1",
  "vue-youtube": "^1.3.0",
  "vuedraggable": "^2.17.0",
  "vuex": "^3.0.1",
  "vuex-persistedstate": "^2.5.4"
},

So nothing helped -> still have problem with iOS 9.3. My project uses PWA/ServiceWorker, which iOS 9 does not support, but I do not think that SW has any relation to this problem, as it simply should not be registered / should be ignored by iOS 9.

I found, that iOS 9 does not support neither let nor fetch, but as I understand, vue-cli should handle it based on my settings. Did I miss any settings?

So, what should I do in order to let the project work on iOS 9?

EDIT:

1) let is from vue-draggable-resizable, which I temporary removed.

2) fetch I fixed by adding import 'whatwg-fetch' to main.js

Now I see the next problem: Unexpected keyword 'const'. Const declarations are not supported in strict mode.

As I see from the 3rd example from the Babel home page, Babel supports const and it must be transpiled, but in the compiled chunk-vendors.xyz.js file, which produces all the errors mentioned above, now I see 507 const's. It seems like build ignores Babel.

I would appreciate any ideas.


Solution

  • I checked all my dependencies one by one -> just commented one by one imported components in main.js and App.vue changed to:

    <template>
      <div id="app">
        TEST
      </div>
    </template>
    

    The result is:

    1) boostrap-vue produces const problems

    2) vue-draggable-resizable produces let problems.

    3) apollo-link produces fetch problems.

    So, in my case I was needed to add import 'whatwg-fetch' to main.js and

    module.exports = {
      ...
      transpileDependencies: ['bootstrap-vue', 'vue-draggable-resizable']
    }
    

    to vue.config.js.