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