Import custom Vue Component fails in TypeScript

Question

The code works, but why does TypeScript not understand my custom Component? And why does it add the .js extension to the filename?

Could not find a declaration file for module ..

I am using Laravel 9, Vue 3, Vite 3, InertiaJS

After hours of searching, I did not find a solution.

Component file

<template> </template>
<script>
  export default {};
</script>

tconfig.json

{
    "compilerOptions": {
        "target": "esnext",
        "module": "esnext",
        "moduleResolution": "node",
        "strict": true,
        "jsx": "preserve",
        "sourceMap": true,
        "resolveJsonModule": true,
        "esModuleInterop": true,
        "lib": [
            "esnext",
            "dom"
        ],
        "types": [
            "vite/client"
        ],
        "baseUrl": ".",
        "paths": {
            "@/*": ["resources/js/*"]
        }
    },
    "include": ["resources/**/*"]
}

Russ Deneychuk · Accepted Answer · 2022-10-28 05:18:26Z

1

If you are using Options API or setup(), define your component using defineComponent method:

<template> </template>

<script>
  import { defineComponent } from 'vue'

  export default defineComponent({
    // type inference enabled
    setup(), // if using setup()
  })
</script>

And if using <script setup>, define it like so:

<template> </template>

<script setup lang="ts">

</script>

https://vuejs.org/guide/typescript/overview.html https://vuejs.org/api/general.html#definecomponent

answered Oct 28, 2022 at 5:18

Russ Deneychuk

8256 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Z0q Over a year ago

Thank you! I actually figured it out before you answered, it was the lang="ts" that was missing in my script tag indeed. Thank you for clarifying

Collectives™ on Stack Overflow

Import custom Vue Component fails in TypeScript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related