Unable to find types with Typescript Vue project

[TechSupportJosh]

I'm getting the following error when doing import Tree from "vue3-treeview":

Could not find a declaration file for module 'vue3-treeview'. '/home/josh/treeviewbug/node_modules/vue3-treeview/dist/vue3-treeview.umd.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/vue3-treeview` if it exists or add a new declaration (.d.ts) file containing `declare module 'vue3-treeview';`ts(7016)

Reproduction steps:

npm init vite@latest treeviewbug -- --template vue-ts
cd treeviewbug
npm install
npm install vue3-treeview

Then change the App.vue file to the following content:

<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import { reactive } from "vue";
import Tree from "vue3-treeview";
import "vue3-treeview/dist/style.css";

const treeNodes = reactive({
  id1: {
    text: "text1",
    children: ["id11", "id12"],
  },
  id11: {
    text: "text11",
    children: ["id112"],
  },
  id12: {
    text: "text12",
    children: ["id111"],
  },
  id111: {
    text: "text111",
  },
  id112: {
    text: "text111",
  },
});

const treeConfig = {
  roots: ["id1"],
};
</script>

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <tree :config="treeConfig" :nodes="treeNodes"> </tree>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Then build with npm run build:

npm run build                                                                                                                                                      11:31:31

> treeviewbug@0.0.0 build
> vue-tsc --noEmit && vite build

src/App.vue:5:18 - error TS7016: Could not find a declaration file for module 'vue3-treeview'. '/home/josh/treeviewbug/node_modules/vue3-treeview/dist/vue3-treeview.umd.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/vue3-treeview` if it exists or add a new declaration (.d.ts) file containing `declare module 'vue3-treeview';`

5 import Tree from "vue3-treeview";
                   ~~~~~~~~~~~~~~~

Found 1 error.

I've included a repository with the code as well as a sandbox to view the error with: https://codesandbox.io/s/rough-cache-kg9iw?file=/src/App.vue https://github.com/TechSupportJosh/vue3-treeview-bug

[N00ts]

Maybe just declare module in your d.ts file ? like "declare module 'vue3-treeview';" ?

[TechSupportJosh]

This works, but means there are no types available for the project, which is unfortunate

On Wed, 22 Dec 2021, 18:57 N00ts, @.***> wrote:

Maybe just declare module in your d.ts file ? like "declare module 'vue3-treeview';" ?

— Reply to this email directly, view it on GitHub https://github.com/N00ts/vue3-treeview/issues/10#issuecomment-999795843, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABHTJODZOTIXG7YUUIOD3Q3USINSNANCNFSM5KNPAXHQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you authored the thread.Message ID: @.***>

[N00ts]

It should, the project is exported with all types, go check dist folder

[TechSupportJosh]

I can see the .d.ts. files are there, however they aren't correctly exposed (not exactly sure why). For example, the index.d.ts file attempts to import from the /src/components directory, which does not exist in the dist folder:

index.d.ts

import Tree from './components/Tree.vue';
export default Tree;

This results in the error:

Cannot find module './components/Tree.vue' or its corresponding type declarations.ts(2307)

[Geoffrey-D]

It should compile with this in your declaration file:

declare module "vue3-treeview" {
    type Tree = object;
    export = Tree
}