TS4023: Exported Variable <x> has or is using name <y> from external module but cannot be named

Question

The compiler is failing to figure out the exact shape of detailRoute, because it does not know the shape of Route.

Option 1

One way around this is to import Route from its source, thereby providing the information that the compiler needs to determine the shape of detailRoute.

import { Route } from "./../node_modules/vue-router/types/router";

export const detailRoute = {
  props: (route: Route) => null,
};

Since the index.d.ts file in vue-router (which you were importing in the question) re-exports Route, it does not provide the direct reference to Route that the compiler needed.

Option 2

Another option is to opt detailRoute out of static typing altogether.

import { Route } from 'vue-router'; // index.d.ts

export const detailRoute: any = {
  props: (route: Route) => null,
};

Since any opts-out of static typing, the compiler does not need to figure out the shape of detailRoute.

Option 3

A further is option is what you did in your own answer. Since you provided the type annotation, the compiler again does not need to figure out the shape of detailRoute.

import { Route, RouteConfig } from 'vue-router'; // index.d.ts

export const detailRoute: RouteConfig = {
  props: (route: Route) => null,
};

See also

https://github.com/Microsoft/TypeScript/issues/5711

When trying to emit [the module], the compiler needs to write an object type literal... representing the shape of the module. But there isn't a name in scope that refers directly to [Route], so the type "cannot be named" and there's an error.

If you add [a direct] import of [Route]... the error should go away.

Apparently this is the solution to my problem:

  import {Route, RouteConfig} from 'vue-router';


  export const detailRoute: RouteConfig = {
    path: '/detail/:id',
    component: Detail,
    props: (route: Route) => ({
      state: route.query.state
    })
  };

Specifying that detailRoute was a RouteConfig (which in turn uses Route) solved the problem. I must have misunderstood how this is supposed to work, but this fixed it.

I came across this when typing a rootReducer, in case anyone else is doing the same. I was importing typed reducers that were composed of other types (state, actions) that I had not also exported.

Short answer: export all your action and state types from the reducers!

Composite types seem not to work to well when their parts are not also exported and you rely on type inference. In this case, inferring the type of the rootReducer (which would be too much to explicitly type if you have more than just a few reducers).

const rootReducer = combineReducers({ typedReducerA, typedReducerB, ... }

For me it this issue was because I was trying to build a library doing:

interface Props {...};
const MyComponent = ({...}:Props)=>{<>...</>}

I changed to:

type Props = {...};

Issue resolved.