Nuxt.js: vue-router breaks nuxt/types

[j1gs4w]

Version

v2.12.2

Reproduction link

https://any-ts-nuxt-project

Steps to reproduce

see https://github.com/nuxt/typescript/issues/374

What is expected ?

compile without error

What is actually happening?

compilation fails with error:
: Property component does not exist on RouterConfig

_{This bug report is available on Nuxt community (#c10764)}

[benyou1969]

This error shows only when create new nuxt app with typescript

ERROR ERROR in /Users/dev/Code/draft/typescript/node_modules/@nuxt/types/config/router.d.ts(14,27):
14:27 Property 'component' does not exist on type 'RouteConfig'.
12 | chunkName?: string
13 | chunkNames?: Record
14 | component?: RouteConfig['component'] | string
| ^
15 | }
16 |
17 | export interface NuxtConfigurationRouter extends RouterOptions {

ℹ Version: typescript 3.8.3

Error Message:

File: node_modules/@nuxt/types/config/router.d.ts

[jeremynetkin]

This problem come from this commit: https://github.com/vuejs/vue-router/commit/dab86c5

Meanwhile, you can force the previews vue-router version to avoid this: "vue-router": "3.3.2"

[pi0]

Hi! This is already fixed:

• #7503
  
  
  
  • https://github.com/nuxt/typescript/commit/b181e7aa49080e10a8bbea3d0818258f5ecf1e8e
  
  

Please ensure upgrading to @nuxt/[email protected]+ :)

[negibouze]

@pi0
Thank you for your enthusiasm.

Today i tried to update nuxt to 2.13.1 (and I was check @nuxt/types version is '0.7.9').
But I got this error in extendRoutes
 Type '(route: Route) => { bar: boolean; }' is not assignable to type 'Dictionary<boolean | Object | RoutePropsFunction>

```nuxt.config.ts
extendRoutes (routes, resolve) {
routes.push({
name: 'foo',
path: '/foo/',
component: resolve(__dirname, 'components/my-component.vue'),
props: (route) => ({ bar: true }) <= Error occurred here.
})
}

I thought RouteConfigSingleView.props has disappeared after `type RouteConfig = UnionToIntersection<_RouteConfig>`.

```vue-router/types/router.d.ts
// Excerpt from vue-router/types/router.d.ts

interface _RouteConfigBase {
  path: string
  name?: string
  children?: RouteConfig[]
  redirect?: RedirectOption
  alias?: string | string[]
  meta?: any
  beforeEnter?: NavigationGuard
  caseSensitive?: boolean
  pathToRegexpOptions?: PathToRegexpOptions
}

interface RouteConfigSingleView extends _RouteConfigBase {
  component?: Component
  props?: boolean | Object | RoutePropsFunction
}

interface RouteConfigMultipleViews extends _RouteConfigBase {
  components?: Dictionary<Component>
  props?: Dictionary<boolean | Object | RoutePropsFunction>
}

export type RouteConfig = RouteConfigSingleView | RouteConfigMultipleViews

```@nuxt/types/config/router.d.ts
// Excerpt from @nuxt/types/config/router.d.ts

type UnionToIntersection = (T extends any ? (k: T) => void : never) extends ((k: infer U) => void) ? U : never
type RouteConfig = UnionToIntersection<_RouteConfig> <= RouteConfigSingleView.props has disappeared here?

export interface NuxtRouteConfig extends Pick> {
children?: NuxtRouteConfig[]
chunkName?: string
chunkNames?: Record
component?: RouteConfig['component'] | string
}
```

I'm sorry, my English is not good.

[negibouze]

@pi0
It may not be what I should write here, but let me comment.

That's all the errors I'm seeing in my IDE.

TS2322:
Type '(route: Route) => { foo: boolean; }' is not assignable to type '(false & Dictionary) | (true & Dictionary) | (Object & Dictionary<...>) | (RoutePropsFunction & Dictionary<...>) | undefined'.
Type '(route: Route) => { foo: boolean; }' is not assignable to type 'RoutePropsFunction & Dictionary'.
Type '(route: Route) => { foo: boolean; }' is not assignable to type 'Dictionary'.       Index signature is missing in type '(route: Route) => { foo: boolean; }'.

It looks to that for each union type in RouteConfigSingleView, the props in RouteConfigMultipleViews intersect.

However, with TypeScript Playground it seems fine.

(property) props?: boolean | Object | RoutePropsFunction | Dictionary | undefined

There may be a problem with my environment.

Sorry for my long post.

[stale[bot]]

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.