From cd11f41f330f8bcd7c977c7fef353c95d85aed39 Mon Sep 17 00:00:00 2001
From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Thu, 13 May 2021 10:00:44 +0200
Subject: [PATCH] build: externalize `@vue/devtools-api` in bundler build

---
 package.json      |  4 +++-
 rollup.config.js  | 11 ++++++-----
 src/RouterLink.ts |  4 +++-
 src/errors.ts     |  1 +
 src/router.ts     |  2 +-
 5 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 2c57b155..806a3f70 100644
--- a/package.json
+++ b/package.json
@@ -60,6 +60,9 @@
     "tags": "vetur/tags.json",
     "attributes": "vetur/attributes.json"
   },
+  "dependencies": {
+    "@vue/devtools-api": "^6.0.0-beta.10"
+  },
   "devDependencies": {
     "@microsoft/api-extractor": "7.8.1",
     "@rollup/plugin-alias": "^3.1.2",
@@ -72,7 +75,6 @@
     "@types/webpack": "^5.28.0",
     "@types/webpack-env": "^1.16.0",
     "@vue/compiler-sfc": "^3.0.7",
-    "@vue/devtools-api": "^6.0.0-beta.9",
     "@vue/server-renderer": "^3.0.7",
     "@vue/test-utils": "^2.0.0-rc.3",
     "axios": "^0.21.1",
diff --git a/rollup.config.js b/rollup.config.js
index 32fdf84c..b012c5c2 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -66,7 +66,8 @@ function createConfig(format, output, plugins = []) {
   output.externalLiveBindings = false
   output.globals = {
     vue: 'Vue',
-    '@vue/devtools-api': 'VueDevtoolsApi',
+    // devtools are not global in iife
+    // '@vue/devtools-api': 'VueDevtoolsApi',
   }
 
   const isProductionBuild = /\.prod\.js$/.test(output.file)
@@ -97,10 +98,10 @@ function createConfig(format, output, plugins = []) {
   // during a single build.
   hasTSChecked = true
 
-  const external = [
-    'vue',
-    // '@vue/devtools-api',
-  ]
+  const external = ['vue']
+  if (!isGlobalBuild) {
+    external.push('@vue/devtools-api')
+  }
 
   const nodePlugins = [resolve(), commonjs()]
 
diff --git a/src/RouterLink.ts b/src/RouterLink.ts
index 59b260f1..d6720bae 100644
--- a/src/RouterLink.ts
+++ b/src/RouterLink.ts
@@ -17,6 +17,7 @@ import { isSameRouteLocationParams, isSameRouteRecord } from './location'
 import { routerKey, routeLocationKey } from './injectionSymbols'
 import { RouteRecord } from './matcher/types'
 import { NavigationFailure } from './errors'
+import { isBrowser } from './utils'
 
 export interface RouterLinkOptions {
   /**
@@ -166,7 +167,8 @@ export const RouterLinkImpl = /*#__PURE__*/ defineComponent({
       )]: link.isExactActive,
     }))
 
-    if ((__DEV__ || __FEATURE_PROD_DEVTOOLS__) && __BROWSER__) {
+    // devtools only
+    if ((__DEV__ || __FEATURE_PROD_DEVTOOLS__) && isBrowser) {
       const instance = getCurrentInstance()
       watchEffect(
         () => {
diff --git a/src/errors.ts b/src/errors.ts
index 705d4353..1168a7eb 100644
--- a/src/errors.ts
+++ b/src/errors.ts
@@ -114,6 +114,7 @@ export function createRouterError<E extends RouterError>(
   type: E['type'],
   params: Omit<E, 'type' | keyof Error>
 ): E {
+  // keep full error messages in cjs versions
   if (__DEV__ || !__BROWSER__) {
     return assign(
       new Error(ErrorTypeMessages[type](params as any)),
diff --git a/src/router.ts b/src/router.ts
index eb3d9913..8afc901d 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -1147,7 +1147,7 @@ export function createRouter(options: RouterOptions): Router {
         unmountApp()
       }
 
-      if ((__DEV__ || __FEATURE_PROD_DEVTOOLS__) && __BROWSER__) {
+      if ((__DEV__ || __FEATURE_PROD_DEVTOOLS__) && isBrowser) {
         addDevtools(app, router, matcher)
       }
     },
-- 
2.39.5