How to fix "TypeError: Right-hand side of 'instanceof' is not callable" in Vue 3 + Typescript

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.

How to fix “TypeError: Right-hand side of ‘instanceof’ is not callable” in Vue 3 + Typescript