Vue dev-serve returns stale content

I am new to ionic but not new to Vue. I am running the latest 5.x with Vue

So far the experience has been absolutely terrible as ionic serve command does not reflect code changes 90% of the time. I mean this is unusable… I have spent all my day just trying to get the server to refresh correctly. Many times, refreshing the page bring an OLD version of the code !! I mean WHAAAATTT ??? Restarting the server helps only 50% of the time

Also debugging is counter-intuitive. Sometime you have a compiler error message; sometime you don’t and you can refresh the page as much as you want; many times. Sometime restarting the server will bring a new error message…

How can I get ionic-serve --ssl --lab to actually work correctly ? There is a github bug report from 2017 describing this issue; it has never been resolved but closed apparently…

Can someone help me figure what is going on ? Surely there is something wrong on my end right ?

update: disabling browser caching entirely seems to help a lot

Nobody has this issue apart from me ? I tried every browsers. I am still battling with it. Downloaded a project from github and the entire thing is not updating :frowning:

I just did “npx browserslist@latest --update-db” thinking that this might help but Ohh what have I done ?? my project does not compile anymore.

Why is everything so buggy ??

[vue-cli-service]  INFO  Starting development server...
[vue-cli-service]  error  in ./src/views/components/Menu.vue?vue&type=script&lang=ts
[vue-cli-service] Module parse failed: Unexpected token (50:24)
[vue-cli-service] File was processed with these loaders:
[vue-cli-service]  * ./node_modules/cache-loader/dist/cjs.js
[vue-cli-service]  * ./node_modules/babel-loader/lib/index.js
[vue-cli-service]  * ./node_modules/ts-loader/index.js
[vue-cli-service]  * ./node_modules/cache-loader/dist/cjs.js
[vue-cli-service]  * ./node_modules/vue-loader-v16/dist/index.js
[vue-cli-service] You may need an additional loader to handle the result of these loaders.
[vue-cli-service] |     showMenu() {
[vue-cli-service] |       const route = useRoute();
[vue-cli-service] >       return route.meta?.hideMenu !== true;
[vue-cli-service] |     },
[vue-cli-service] | 
[vue-cli-service]  @ ./src/views/components/Menu.vue?vue&type=script&lang=ts 1:0-339 1:0-339 1:340-668 1:340-668
[vue-cli-service]  @ ./src/views/components/Menu.vue
[vue-cli-service]  @ ./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--14-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/App.vue?vue&type=script&lang=ts
[vue-cli-service]  @ ./src/App.vue?vue&type=script&lang=ts
[vue-cli-service]  @ ./src/App.vue
[vue-cli-service]  @ ./src/main.ts
[vue-cli-service]  @ multi (webpack)-dev-server/client?http://172.20.10.3:8100&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts
[vue-cli-service]  error  in ./src/views/components/Menu.vue?vue&type=template&id=218d8ca4&scoped=true
[vue-cli-service] Module parse failed: Unexpected token (54:85)
[vue-cli-service] File was processed with these loaders:
[vue-cli-service]  * ./node_modules/cache-loader/dist/cjs.js
[vue-cli-service]  * ./node_modules/babel-loader/lib/index.js
[vue-cli-service]  * ./node_modules/vue-loader-v16/dist/templateLoader.js
[vue-cli-service]  * ./node_modules/cache-loader/dist/cjs.js
[vue-cli-service]  * ./node_modules/vue-loader-v16/dist/index.js
[vue-cli-service] You may need an additional loader to handle the result of these loaders.
[vue-cli-service] |           class: "ion-padding"
[vue-cli-service] |         }, {
[vue-cli-service] >           default: _withId(() => [_createTextVNode(_toDisplayString(_ctx.currentUser?.email), 1
[vue-cli-service] |           /* TEXT */
[vue-cli-service] |           )]),
[vue-cli-service]  @ ./src/views/components/Menu.vue?vue&type=template&id=218d8ca4&scoped=true 1:0-362 1:0-362
[vue-cli-service]  @ ./src/views/components/Menu.vue
[vue-cli-service]  @ ./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--14-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/App.vue?vue&type=script&lang=ts
[vue-cli-service]  @ ./src/App.vue?vue&type=script&lang=ts
[vue-cli-service]  @ ./src/App.vue
[vue-cli-service]  @ ./src/main.ts
[vue-cli-service]  @ multi (webpack)-dev-server/client?http://172.20.10.3:8100&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts
[vue-cli-service]  error  in ./src/store/authentication.ts
[vue-cli-service] Module parse failed: Unexpected token (97:27)
[vue-cli-service] File was processed with these loaders:
[vue-cli-service]  * ./node_modules/cache-loader/dist/cjs.js
[vue-cli-service]  * ./node_modules/babel-loader/lib/index.js
[vue-cli-service]  * ./node_modules/ts-loader/index.js
[vue-cli-service]  * ./node_modules/eslint-loader/index.js
[vue-cli-service] You may need an additional loader to handle the result of these loaders.
[vue-cli-service] |   mutations: {
[vue-cli-service] |     hasUser(state, payload) {
[vue-cli-service] >       state.user = payload?.user || null;
[vue-cli-service] |       console.log(state);
[vue-cli-service] |     },
[vue-cli-service]  @ ./src/store/index.ts 3:0-46 8:4-18
[vue-cli-service]  @ ./src/main.ts
[vue-cli-service]  @ multi (webpack)-dev-server/client?http://172.20.10.3:8100&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

I’m also working with Ionic Vue, and I’m experiencing none of these issues. Everything works pretty smooth.
Your console output shows there is a problem with the optional chaining operator. You can either try to get rid of it in your codebase, or you update your configuration like described here:

or here:

Hey there,

Sorry to hear you are running into issues! The best way to get started is to use the ionic start command in the CLI and get setup with a starter application. Are you starting a new Ionic Vue application via ionic start or by downloading a 3rd party repo?

I started with ionic start but after countless bugs I tried a template… This is a nightmare still… nothing works… at the moment; I have a black screen; impossible to get anything to render; no error message anywhere; I don’t even understand where to begin to debug…

In your project directory, what is the result of running ionic info in the console?

the result is like this:
ps I just managed to finally get the error message by closing my browser, restarting the server, closing the browser window and opening it in another browser !!! Finally got an error message in the console; something is wrong…

[WARN] Error loading @capacitor/ios package.json: Error: Cannot find module '@capacitor/ios/package'
       
       Require stack:
       - /usr/local/lib/node_modules/@ionic/cli/lib/project/index.js
       - /usr/local/lib/node_modules/@ionic/cli/lib/index.js
       - /usr/local/lib/node_modules/@ionic/cli/index.js
       - /usr/local/lib/node_modules/@ionic/cli/bin/ionic

Ionic:

   Ionic CLI       : 6.16.3 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/vue 5.5.2

Capacitor:

   Capacitor CLI      : 2.4.5
   @capacitor/android : 2.4.5
   @capacitor/core    : 2.4.5
   @capacitor/ios     : not installed

Utility:

   cordova-res : not installed globally
   native-run  : not installed globally

System:

   NodeJS : v16.3.0 (/usr/local/Cellar/node/16.3.0/bin/node)
   npm    : 7.15.1
   OS     : macOS Big Sur

What is the error message?

Also curious which browser + version you are testing on?

just an error from my code: context.getters is not a function. (In 'context.getters('hasUser')', 'context.getters' is an instance of Object) but is nice to finally see it…
I am testing on OSX 11.3 on safari, safari technology preview, firefox, brave and even chrome too

My issue is that ionic serve is utterly bugged for me. completely inconsistent; it is honestly making you question your sanity.

should I install @capacitor/ios ?

ps I don’t know what is wrong but I can only reply every 15mn… the forum says I am replying too fast… thats not helpful

This is frankly getting ridiculous; the compiler is compiling stuff from an hour ago. Crashing because it is looking for payload.email and I removed that ages ago. If I do a global search this line of code DOES NOT EXIST !!! This framework is a joke 2 days of my life litterally trying to get this thing to just compile. I can not work !!!

and again; switched browsers and it works again for the next 5mn

and as I said; another one: Unhandled Promise Rejection: Error: Couldn’t resolve component “default” at “/login” : I have changed nothing to it…

Hey there! Sorry to hear your having some issue, but would like to point out that the issues you are probably experiencing are not related to Ionic at all.

Ionic is all the UI and visual layer. The build tools and everything used to compile/serve the app are from the framework ecosystems, in this case vue.

But maybe take a few steps back and “walk before running” (metephorically speaking).

Here’s what to try.

  • Get the latest ionic CLI installed and make sure everything is up to date
npm install -g @ionic/cli
  • Start a new project from our starters
ionic start myApp sidemenu --type vue

These are tested and guaranteed to work all the time.

  • Serve the app
ionic serve

This will start the Vue CLI and server your app. Make a few changes here and there and verify that things are updating. I’ve tested things on my end and everything updated correctly.

Let’s get to this point before anything else.

done that already many times.
My main issue is that the code refresh is unreliable. I mean no one should ever see an error containing non existing code. Had that a few times already.
Then my second issue is that many times code errors are not displayed. I mean I need to change browser to see it.
But i am beginning to think that both issues are related; maybe my bad code breaks the compiler somehow
I know all that sounds bunker but it is happening.

so right now I have updated my menu. but the code is not reflected by the lab; I bet you if I change browser in 5mn it will work just like that

And here you go, restart ionic serve and surely here it is. I want my money now :slight_smile:

That is always a possibility. The way Vue’s dev server works is that if has a build failure, when it gets restored, it can return a stale/old version of the compiled code. But that is an issue with the Vue CLI, not Ionic.

If you can share a sample project with exact steps to replicate, I can take a look.

Also worth mentioning that when things go wrong, it’s easy to get stressed/annoyed and act out. Keep in mind that all this code is written by people for free, and is open source. If there are issues or hiccups, they’re not doing that to spite developers, it’s just an accident.

Thanks for the offer but I don’t think it will help; this is just the beginning of the project and the stalled files happen randomly for anything; I could not find any pattern so far.

If there was a way to direct the dev server to “check” files against existing code every time…

I am completely out of my depth here. And apparently the only one to experience this issue…

How do you normally debug a ionic app ? Do you just look for console error messages ? What if the compiler says “No issues found.” and you have no error messages ? Does that ever happen to you; is this normal behavior? Do you use a Vue specific browser plugin ?

To be fair I have never developed a native Vue application; I always used Vue as a tool inside my PHP application. That said it is a very complex app. In PHP you always have an error message; it is not possible for an app to load and not work without complaining about something.

Ok I have something for you; on the template below I have no error message anywhere ; it even compiles even that I never imported IonContent

If I import IonContent the page loads but as I said there was 0 error message !! (not even in my IDE funnily enough. I am looking at you TYPESCRIPT )

can you reproduce this issue ? I guess this would work in any project

Also, right now the ion-menu-button does not show up anymore but no error message; this since yesterday. surely my own code fault but how do I know ?

<template>
  <ion-page>
    <ion-header :translucent="true" class="pageHeader">
      <ion-toolbar class="toolbar">
        <ion-buttons slot="start">
          <ion-menu-button color="primary"></ion-menu-button>
        </ion-buttons>
        <ion-title>{{ $route.name }}</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content :fullscreen="true">
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title size="large">{{ $route.name }}</ion-title>
        </ion-toolbar>
      </ion-header>

      <div id="container">
        <ion-button @click="$router.push($route.name)">DETAIL PAfGE</ion-button>
      </div>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import {
  IonButtons,
  IonHeader,
  IonMenuButton,
  IonPage,
  IonTitle,
  IonToolbar,
  IonButton,
    // IonContent
} from "@ionic/vue";
import { defineComponent } from "vue";

export default defineComponent({
  name: "Messages",
  components: {
    IonButtons,
    IonHeader,
    IonMenuButton,
    IonPage,
    IonTitle,
    IonToolbar,
    IonButton,
    // IonContent
  }
});
</script>

<style scoped>
#container {
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

#container strong {
  font-size: 20px;
  line-height: 26px;
}

#container p {
  font-size: 16px;
  line-height: 22px;
  color: #8c8c8c;
  margin: 0;
}

#container a {
  text-decoration: none;
}

.pageHeader{

}
.pageHeader .toolbar{
  padding-top: 20px;
}
</style>

Also I found from the vue-cli docs

Caching and Parallelization

  • cache-loader is enabled for Vue/Babel/TypeScript compilations by default. Files are cached inside node_modules/.cache - if running into compilation issues, always try deleting the cache directory first.
  • thread-loader will be enabled for Babel/TypeScript transpilation when the machine has more than 1 CPU cores.

#

Do you know how to disable this in IONIC ?

Again, Ionic is the UI, not the tool doing the dev-server. What eve the CLI docs say is the way to do something is the right way to do it.

I think I found why but could you point me to how I access/modify webpack.config.js or vue.config.js in IONIC ? Do I just create the files and they will be compiled ?
You say Ionic is just UI so that should work ?

All Ionic Vue apps are configured to use vue.config.js. We don’t ship the file with our starters since there is no special configuration needed for Ionic Vue to work.

You can create the vue.config.js file and add your Webpack config: Configuration Reference | Vue CLI