There is no component source code to debug in Chrome devTools

[kiril4913]

I faced to very strange issue… and have no idea how to solve it.

I create my custom component:

<template>
 <q-list
   no-border    link  inset-delimiter  separator>
<q-item @click.native="selectRouteChipByNotAutocomplete(routeItem)" v-for="routeItem in routeTabItems" :key="routeItem" >
  <q-item-side icon="info" />
    <q-item-main>
       {{routeItem}}
    </q-item-main>
  </q-item>
 </q-list>
</template>

<script>
export default {
    name: "routeCollapsibleList",
    data(){
      return{
        routeTabItems:[],
      }
    },
    mounted(){},
    methods:{
      selectRouteChipByNotAutocomplete(routeChip){},
      initRouteTabItems(timerID){},
    },
}
</script>
<style scoped>
</style>

And render it in another one:

<template>
   <route-collapsible-list></route-collapsible-list>
   <trans-modal></trans-modal>
</template>
<script>
   import transModal from "../components/transModal";
   import routeCollapsibleList from "../components/routeCollapsibleList";

   export default {
     name: 'LayoutDefault',
     components: {
       transModal,
       routeCollapsibleList,
     },
     data() { },
     mounted(){ },
     methods: { }
   }

So the weird thing is that it renders everything ok in DOM but there is no sources for routeCollapsibleList in “quasar dev” mode and at the same time I can see the component in Chrome’s devTool in Vue tab… Also it loads sources for transModal and LayoutDefault components and I can put the breakpoints to debug… But it doesn’t load the routeCollapsibleList component’s source code, there is no just such file in source tab and in the dropdown list of code files…

Is this some kind of babel or webpack building issue? How to solve this and load the propper component code for debug?

[genyded]

We’ve run into similar issues a couple of times and either building the app (so that it gets put into dist) - no idea why this works. And/or making sure the env is set to ‘development’ (specifically webpacks NODE_ENV which should be derives from Quasars settings.

[kiril4913]

@genyded
please, can you write the steps for your solution with the paths of the files wich has to be editted?

[genyded]

Seriously???

1. Run quasar build from a console prompt while in your project directory
2. Make sure nothing in your quasar.conf.js file sets env to production and that you do not have a .env file in your project root or if you do, that is does not set env to production

This is JS project 101 stuff. I cannot guarantee it will work for you - but if not, it’s likely something along those same lines. You’ll just have to play around a bit until you figure it out.

[kiril4913]

@genyded,
so I’ve found out the reason of the issue. It happens because it loads the component dynamically when the propper tab-pane is opened. So if I set the v-once directive to the component it loads the source code from the beginnind and I can debug it.