How to fix “TypeError: Right-hand side of ‘instanceof’ is not callable” in Vue 3 + Typescript
If you are working with Vue 3 and Typescript, you might encounter the following error message: “TypeError: Right-hand side of ‘instanceof’ is not callable”. This error occurs when you try to use the “instanceof” operator on a type that is not callable. In this blog post, we will explore two solutions to fix this issue.
Solution 1: Update Vue Router
The first solution is to update Vue Router to the latest version. This error is often caused by an outdated version of Vue Router that is not compatible with Vue 3 and Typescript.
To update Vue Router, you can use the following command:
npm install vue-router@next
After updating Vue Router, make sure to restart your development server to apply the changes. This should resolve the “TypeError: Right-hand side of ‘instanceof’ is not callable” error.
Solution 2: Use the “as” keyword
If updating Vue Router doesn’t solve the issue, you can try using the “as” keyword to explicitly cast the type. This can help TypeScript recognize the type correctly and avoid the error.
Here’s an example of how to use the “as” keyword:
import { RouteRecordRaw } from 'vue-router';
const routes: Array = [
{
path: '/',
name: 'Home',
component: () => import('@/views/Home.vue') as () => JSX.Element, // Use "as" keyword to cast the type
},
];
By using the “as” keyword, you explicitly specify that the component is a callable function, resolving the “TypeError: Right-hand side of ‘instanceof’ is not callable” error.
Conclusion
If you encounter the “TypeError: Right-hand side of ‘instanceof’ is not callable” error in Vue 3 + Typescript, you can try updating Vue Router to the latest version or using the “as” keyword to cast the type. These solutions should help resolve the issue and allow you to continue working on your project without any errors.
Leave a Reply