Ionic start: Deprecation warning, outdated templates, versions?

Ionic Framework
1

I am just getting started with Ionic, Vue 3 and Capacitor. To get a feel I started the tutorial at https://ionicframework.com/docs/vue/your-first-app. My setup is currently like this:

Ionic:
   Ionic CLI : 6.12.2

Utility:
   cordova-res : 0.15.2
   native-run  : 1.3.0

System:
   NodeJS : v14.15.1
   npm    : 6.14.8
   OS     : macOS Catalina

What struck me first was the number of deprecation warnings when creating a blank project with
ionic start test-app tabs --type vue --capacitor
Here are some of the warnings:

npm WARN deprecated eslint-loader@2.2.1: This loader has been deprecated. Please use eslint-webpack-plugin
npm WARN deprecated debug@3.2.6: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797)
npm WARN deprecated request@2.88.0: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated @hapi/joi@15.1.1: Switch to 'npm install joi'
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated mkdirp@0.5.1: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/address@2.1.4: Moved to 'npm install @sideway/address'
npm WARN deprecated @hapi/bourne@1.3.2: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/topo@3.1.6: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated core-js@2.6.12: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
npm WARN deprecated request-promise-native@1.0.9: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated left-pad@1.3.0: use String.prototype.padStart()

What kind of worries me most here is a dependency on fsevents 1 which supposedly breaks on node 14+, but the current LTS version of node (as recommended in the tutorial) ist 14.15.1.

Templates
When I look at the generated sources, VSCode gives me a deprecation warning in Tabs.vue that the 'slot' attributes are deprecated (since Vue 2.6.0). I was under the impression that the version of Vue that ships with Ionic is 3.0 now. So is this an outdated template that is being used or am I missing something else here?

Versions
When looking at the package.json that is generated by ionic start I also see some outdated dependencies (like @ionic/vue, @ionic/vue-router). Here is what my current package.json looks like:

"dependencies": {
    "@capacitor/core": "2.4.4",
    "@ionic/vue": "^5.4.0",
    "@ionic/vue-router": "^5.4.0",
    "core-js": "^3.6.5",
    "vue": "^3.0.0-0",
    "vue-router": "^4.0.0-0"
  },

Do I have to update these myself or is ionic-cli taking care of this at some point?

Thanks for your pointers. I find this a bit confusing for a start. I come from iOS native with Swift.

2

Hey there,

Most of these warnings are caused by dependencies not related to Ionic Framework, but I can understand the concern.

npm deprecation warnings

These warnings seem to be related to dependencies required by Vue 3, not Ionic Framework. I am able to reproduce this in a regular Vue 3 app without Ionic Framework as well. I checked https://github.com/vuejs/vue-cli/tree/master and I see they have recently resolved some of these dependency issues, so these warnings should go away whenever the related Vue packages get updated.

VSCode Slot Warnings

This one is a bit confusing since Ionic Vue actually uses the slot API for Web Components, but the syntax is the same as the slot API in Vue 2. We have an eslint rule in our starters that prevents ESLint from warning us about the slot deprecations since we are using the Web Component slot, not the Vue 2 slot.

Unfortunately, it looks like the Vetur plugin in VSCode is ignoring this ESLint rule and continues to warn about it anyways. I am still trying to figure out why, but it seems like this is a bug in Vetur. You can work around it for now by turning off validate vue-html in <template> using eslint-plugin-vue in the Vetur settings in VSCode. See https://github.com/ionic-team/ionic-framework/issues/22236#issuecomment-731000931 for more information.

In short, this is likely a bug in the Vetur plugin in VSCode and not cause for concern. See the link I posted for a workaround.

Versioning

The caret (^) in front of the version in your package.json file is going to tell npm to install the latest non-major version of Ionic Vue. While the package.json file says @ionic/vue: 5.4.0, the caret will cause npm to install @ionic/vue@5.5.1 which is the current version as of writing.

You can run the ionic info command in any Ionic Framework project to see what version of the framework is installed in your application.

Hope this clears up any confusions. Let me know if you have any other questions.

4 Likes