fix: UI fixes (#1397)

* fix:  ERROR  AssertionError [ERR_ASSERTION]: missing path

* refactor(ui): export portfinder and graphql-server from @vue/cli-ui and new VUE_CLI_UI_DEV env var

* fix(ui): invoke: force load package.json

packages/@vue/cli-ui/package.json

@@ -5,7 +5,7 @@
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
-    "graphql-api": "cross-env VUE_CLI_DEBUG=true vue-cli-service graphql-api",
+    "graphql-api": "cross-env VUE_CLI_DEBUG=true VUE_CLI_UI_DEV=true vue-cli-service graphql-api",
     "run-graphql-api": "vue-cli-service run-graphql-api",
     "run-test-graphql-api": "cross-env NODE_ENV=test VUE_APP_GRAPHQL_PORT=4040 VUE_APP_CLI_UI_URL=ws://localhost:4040/graphql yarn run graphql-api",
     "prepublishOnly": "yarn run lint --no-fix && yarn run build",

packages/@vue/cli-ui/server.js

@@ -0,0 +1,2 @@
+exports.server = require('vue-cli-plugin-apollo/graphql-server')
+exports.portfinder = require('portfinder')

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

@@ -47,7 +47,7 @@ function _loadFolder (root, context) {
 
 function loadFolder (root, context) {
   const folder = path.join(root, './locales')
-  if (process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'test' && !watchedTrees.get(root) && fs.existsSync(folder)) {
+  if (process.env.VUE_CLI_UI_DEV && !watchedTrees.get(root) && fs.existsSync(folder)) {
     watchedTrees.set(root, true)
     const watch = require('watch')
     watch.watchTree(folder, () => {

packages/@vue/cli-ui/src/graphql-api/utils/logger.js

@@ -1,7 +1,7 @@
 const chalk = require('chalk')
 
 exports.log = (...args) => {
-  if (process.env.NODE_ENV === 'production') return
+  if (!process.env.VUE_CLI_UI_DEV) return
   const date = new Date()
   const timestamp = `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}.${date.getSeconds().toString().padStart(2, '0')}`
   const first = args.shift()
@@ -15,7 +15,7 @@ const simpleTypes = [
 ]
 
 exports.dumpObject = (obj) => {
-  if (process.env.NODE_ENV === 'production') return
+  if (!process.env.VUE_CLI_UI_DEV) return
   const result = {}
   Object.keys(obj).forEach(key => {
     const value = obj[key]

packages/@vue/cli/lib/invoke.js

@@ -41,7 +41,7 @@ function getPkg (context) {
   if (!fs.existsSync(pkgPath)) {
     throw new Error(`package.json not found in ${chalk.yellow(context)}`)
   }
-  return require(pkgPath)
+  return loadModule(pkgPath, context, true)
 }
 
 async function invoke (pluginName, options = {}, context = process.cwd()) {

packages/@vue/cli/lib/ui.js

@@ -1,5 +1,5 @@
 const { log, error, openBrowser } = require('@vue/cli-shared-utils')
-const portfinder = require('portfinder')
+const { portfinder, server } = require('@vue/cli-ui/server')
 
 async function ui (options = {}, context = process.cwd()) {
   let port = options.port
@@ -10,14 +10,15 @@ async function ui (options = {}, context = process.cwd()) {
   // Config
   process.env.VUE_APP_CLI_UI_URL = ''
 
-  if (!options.dev) {
-    // Optimize express
-    process.env.NODE_ENV = 'production'
+  // Optimize express
+  process.env.NODE_ENV = 'production'
+
+  // Dev mode
+  if (options.dev) {
+    process.env.VUE_CLI_UI_DEV = true
   }
 
   if (!options.quiet) log(`🚀  Starting GUI...`)
-  let server = require('vue-cli-plugin-apollo/graphql-server')
-  server = server.default || server
 
   const opts = {
     port,
@@ -34,7 +35,8 @@ async function ui (options = {}, context = process.cwd()) {
       resolvers: require.resolve('@vue/cli-ui/src/graphql-api/resolvers.js'),
       context: require.resolve('@vue/cli-ui/src/graphql-api/context.js'),
       pubsub: require.resolve('@vue/cli-ui/src/graphql-api/pubsub.js'),
-      server: require.resolve('@vue/cli-ui/src/graphql-api/server.js')
+      server: require.resolve('@vue/cli-ui/src/graphql-api/server.js'),
+      directives: require.resolve('@vue/cli-ui/src/graphql-api/directives.js')
     }
   }