fix(ssr): handle symboless Modules in dynamic imports (vuejs#2355)

* fix(ssr): handle symboless Modules in dynamic imports

* chore: fix types

Author: posva

packages/router/__tests__/guards/loadRouteLocation.spec.ts

@@ -1,9 +1,10 @@
-import { isRouteComponent, loadRouteLocation } from '../../src/navigationGuards'
+import { loadRouteLocation } from '../../src/navigationGuards'
 import { RouteRecordRaw } from '../../src/types'
 import { components } from '../utils'
 import { RouteLocationRaw, createMemoryHistory, createRouter } from '../../src'
 import { FunctionalComponent } from 'vue'
 import { describe, expect, it } from 'vitest'
+import { isRouteComponent } from '../../src/utils'
 
 const FunctionalHome: FunctionalComponent = () => null
 FunctionalHome.displayName = 'Home'

packages/router/src/navigationGuards.ts

@@ -1,9 +1,4 @@
-import {
-  isRouteLocation,
-  Lazy,
-  RouteComponent,
-  RawRouteComponent,
-} from './types'
+import { isRouteLocation, Lazy, RouteComponent } from './types'
 
 import type {
   RouteLocationNormalized,
@@ -25,7 +20,7 @@ import { ComponentOptions, onUnmounted, onActivated, onDeactivated } from 'vue'
 import { inject, getCurrentInstance } from 'vue'
 import { matchedRouteKey } from './injectionSymbols'
 import { RouteRecordNormalized } from './matcher/types'
-import { isESModule } from './utils'
+import { isESModule, isRouteComponent } from './utils'
 import { warn } from './warning'
 
 function registerGuard(
@@ -349,23 +344,6 @@ export function extractComponentsGuards(
   return guards
 }
 
-/**
- * Allows differentiating lazy components from functional components and vue-class-component
- * @internal
- *
- * @param component
- */
-export function isRouteComponent(
-  component: RawRouteComponent
-): component is RouteComponent {
-  return (
-    typeof component === 'object' ||
-    'displayName' in component ||
-    'props' in component ||
-    '__vccOpts' in component
-  )
-}
-
 /**
  * Ensures a route is loaded, so it can be passed as o prop to `<RouterView>`.
  *

packages/router/src/utils/index.ts

@@ -3,12 +3,36 @@ import {
   RouteComponent,
   RouteParamsRawGeneric,
   RouteParamValueRaw,
+  RawRouteComponent,
 } from '../types'
 
 export * from './env'
 
+/**
+ * Allows differentiating lazy components from functional components and vue-class-component
+ * @internal
+ *
+ * @param component
+ */
+export function isRouteComponent(
+  component: RawRouteComponent
+): component is RouteComponent {
+  return (
+    typeof component === 'object' ||
+    'displayName' in component ||
+    'props' in component ||
+    '__vccOpts' in component
+  )
+}
+
 export function isESModule(obj: any): obj is { default: RouteComponent } {
-  return obj.__esModule || obj[Symbol.toStringTag] === 'Module'
+  return (
+    obj.__esModule ||
+    obj[Symbol.toStringTag] === 'Module' ||
+    // support CF with dynamic imports that do not
+    // add the Module string tag
+    (obj.default && isRouteComponent(obj.default))
+  )
 }
 
 export const assign = Object.assign