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

Author: posva

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",

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()]
 

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(
         () => {

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)),

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)
       }
     },