TS4023: Exported variable <x> has or is using name <y> from external module, but cannot be named
I've seen this before, but they don't seem to cover this specific use case (or they don't work / help)
import {Route} from 'vue-router';
export const detailRoute = {
path: '/detail/:id',
component: Detail,
props: (route: Route) => ({
state: route.query.state
})
};
detailRoute is using Route which I am importing, but I am assuming as import {Route} name it doesn't work? Is there any other / better way to do this that will work? I tried export {Route};
it but it didn't help.
tsconfig.json:
{
"compilerOptions": {
"target": "ES2017",
"module": "ES2015",
"moduleResolution": "Node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"forceConsistentCasingInFileNames": true,
"allowSyntheticDefaultImports": true,
"noEmitHelpers": true,
"importHelpers": true,
"pretty": true,
"alwaysStrict": true,
"declaration": true,
"declarationDir": "./types",
"lib": [
"DOM",
"ES2017",
"DOM.Iterable",
"ScriptHost"
],
"baseUrl": "./client",
"paths": {
"styles/*": ["./app/core/styles/*"],
"core/*": ["./app/core/*"],
"components/*": ["./app/components/*"],
"containers/*": ["./app/containers/*"],
"assets/*": ["./assets/*"],
"config/*": ["./config/*"]
}
}
}
The exact error:
TS4023: Exported variable 'detailRoute' has or is using name 'Route' from external module "/Users/chris/<projectname>/node_modules/vue-router/types/router" but cannot be named.
source to share
The compiler cannot determine the exact shape detailRoute
because it does not know the shape Route
.
Option 1
One way is to import Route
from your source, thereby providing the information that the compiler must determine for the form detailRoute
.
import { Route } from "./../node_modules/vue-router/types/router";
export const detailRoute = {
props: (route: Route) => null,
};
Since the file index.d.ts
invue-router
(which you imported in the question) is re-exported Route
, it does not provide a direct link to Route
what the compiler needs.
Option 2
Another option is to choose detailRoute
from static typing in general.
import { Route } from 'vue-router'; // index.d.ts
export const detailRoute: any = {
props: (route: Route) => null,
};
Since it is any
not static typing, the compiler does not need to define the form detailRoute
.
Option 3
Another option is what you did in your own answer. Since you provided the type annotation, the compiler again does not need to define the shape 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 a [module], the compiler needs to write an object type literal ... representing the form of the module. But the area that refers directly to [Route] does not have a name, so the type cannot be named and there is an error.
If you added [direct] import [Route] ... the error should be gone.
source to share
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
})
};
Setting detailRoute to be a RouteConfig (which in turn uses Route) solved the problem. I must have misunderstood how this is supposed to work, but this has been fixed.
source to share