build: externalize `@vue/devtools-api` in bundler build

diff --git a/package.json b/package.json
index 2c57b1551a1ced2c5967baeae036311cc87745d9..806a3f70aa9b5d805e4b96e6778baa63f5a06987 100644 (file)
--- 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 32fdf84ca7d6ef21207818ef7cb998b96f5f9576..b012c5c20566d7d9652673a58915a2109e5b1a37 100644 (file)
--- 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 59b260f1435a08a45b474c1c5da967c37f95a0bf..d6720bae347f17118e7d4d18413bef4befca9d1a 100644 (file)
--- 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 705d4353d0beb89d9ea5975b3b49c4c50f7e373d..1168a7eb34ad788dac0889bfdb5bd0533f0d4936 100644 (file)
--- 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 eb3d99138b8e9a36e812785702094e102f243c68..8afc901dabff3aef2d85a1e5e26a590414419bf0 100644 (file)
--- 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)
       }
     },