fix(ui): various bugs

Author: Guillaume Chau

packages/@vue/cli-ui-addon-webpack/src/components/WebpackAnalyzer.vue

@@ -63,7 +63,7 @@
         </svg>
       </template>
 
-      <div class="described-module">
+      <div v-if="describedModule" class="described-module">
         <div class="wrapper">
           <div class="path" v-html="modulePath"/>
           <div
@@ -137,6 +137,7 @@ export default {
     },
 
     modulePath () {
+      if (!this.describedModule) return
       let path = `<b>${this.describedModule.id}</b>`
       let module = this.describedModule
       while (module.parent && module !== this.currentTree) {
@@ -154,12 +155,22 @@ export default {
   watch: {
     modulesTrees: {
       handler (value) {
-        if (!this.selectedChunk && value) {
+        if (value) {
           const keys = Object.keys(value)
           if (keys.length) {
-            this.selectedChunk = keys[0]
+            if (!this.selectedChunk || !keys.includes(this.selectedChunk)) {
+              if (keys.length) {
+                this.selectedChunk = keys[0]
+              }
+            }
+            this.goToHome()
+            return
           }
         }
+
+        // Clear
+        this.currentTree = null
+        this.selectedChunk = null
       },
       immediate: true
     },

packages/@vue/cli-ui/src/graphql-api/connectors/plugins.js

@@ -24,7 +24,6 @@ const cwd = require('./cwd')
 const folders = require('./folders')
 const prompts = require('./prompts')
 const progress = require('./progress')
-const projects = require('./projects')
 const logs = require('./logs')
 const clientAddons = require('./client-addons')
 const views = require('./views')
@@ -96,15 +95,18 @@ function resetPluginApi (context) {
   // Add views
   pluginApi.views.forEach(view => views.add(view, context))
 
-  const project = projects.getCurrent(context)
-  if (!project) return
-  if (projectId !== project.id) {
-    projectId = project.id
-    pluginApi.projectOpenHooks.forEach(fn => fn(project, projects.getLast(context)))
-    pluginApi.project = project
-  } else {
-    pluginApi.pluginReloadHooks.forEach(fn => fn(project))
-  }
+  setTimeout(() => {
+    const projects = require('./projects')
+    const project = projects.getCurrent(context)
+    if (!project) return
+    if (projectId !== project.id) {
+      projectId = project.id
+      pluginApi.projectOpenHooks.forEach(fn => fn(project, projects.getLast(context)))
+      pluginApi.project = project
+    } else {
+      pluginApi.pluginReloadHooks.forEach(fn => fn(project))
+    }
+  })
 }
 
 function runPluginApi (id, context, fileName = 'ui') {

packages/@vue/cli-ui/src/views/ProjectTaskDetails.vue

@@ -182,7 +182,7 @@ export default {
       },
       fetchPolicy: 'cache-and-network',
       async result ({ data, loading }) {
-        if (!this.$_init && !loading && data && data.task.defaultView) {
+        if (!this.$_init && !loading && data && data.task && data.task.defaultView) {
           this.$_init = true
           await this.$nextTick()
           this.currentView = data.task.defaultView