1

I am trying to use a third party package namely 'vue-horizontal-calendar' with no luck. It gives me this message when I hover over the import statement:

Could not find a declaration file for module 'vue-horizontal-calendar'. 'Project/node_modules/vue-horizontal-calendar/lib/vue-horizontal-calendar.umd.min.js' implicitly has an 'any' type. Try npm i --save-dev @types/vue-horizontal-calendar if it exists or add a new declaration (.d.ts) file containing declare module 'vue-horizontal-calendar';

I have tried 'npm i --save-dev @types/vue-horizontal-calendar' with a 404 error. I have also tried installing typescript and initializing a tsconfig.json using npx tsc --init for this project to follow along some possible solutions like adding typeroots to tsconfig.json with types file setup, setting 'noImplicitAny' to false, using require instead of import provided in following links:

Could not find a declaration file for module 'module-name'. '/path/to/module-name.js' implicitly has an 'any' type

Could not find a declaration file for module 'vue-xxx'

https://www.detroitlabs.com/blog/2018/02/28/adding-custom-type-definitions-to-a-third-party-library/

package.json file:

{
  "name": "test-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0",
    "vue-ellipse-progress": "^2.0.0",
    "vue-horizontal-calendar": "^0.8.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0",
    "node-sass": "^6.0.0",
    "sass-loader": "^11.1.1"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

babel.config.json

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

This is the first time I have encountered this issue and I am not sure what this type issue is about and I am new to typescript(not used typescript before). However on later exploring this package in the node modules folder I discovered the following folder structure:

package folder structure in nodemodules

with the index.d.ts file being referenced in the package.json as "typings": "types/index.d.ts"

The contents of index.d.ts:

import { Vue } from "./vue";
import "./umd";

export default Vue;

export {
  CreateElement,
  VueConstructor
} from "./vue";

export {
  Component,
  AsyncComponent,
  ComponentOptions,
  FunctionalComponentOptions,
  RenderContext,
  PropType,
  PropOptions,
  ComputedOptions,
  WatchHandler,
  WatchOptions,
  WatchOptionsWithHandler,
  DirectiveFunction,
  DirectiveOptions
} from "./options";

export {
  PluginFunction,
  PluginObject
} from "./plugin";

export {
  VNodeChildren,
  VNodeChildrenArrayContents,
  VNode,
  VNodeComponentOptions,
  VNodeData,
  VNodeDirective
} from "./vnode";

Also I read somewhere in the above mentioned links that when we define a custom type declaration file IT SHOULD NOT CONTAIN ANY IMPORTS AND EXPORTS and just 'declare module 'package-name';'.

I know I am missing something obvious here but it has been bothering me for 2 days and this is my first post on stack overflow so sorry if it's a stupid question.

EDIT one thing I have noticed is the change in app behavior on import vs require On using the import as import VueHorizontalCalendar from 'vue-horizontal-calendar' the whole app breaks and none of the components are rendered on the browser with this console logon import

while on using require instead as const VueHorizontalCalendar = require('vue-horizontal-calendar') all other components are rendered expect for the one from the package with following console log erroron require

siretole
  • 11
  • 4
  • I tried `yarn add @types/vue-horizontal-calendar --dev` and it seems `vue-horizontal-calendar` __does not__ have a type library at all... – Michael Rovinsky May 29 '21 at 07:34
  • You said that you were seeing this message when hovering over the `import` statement. Since you aren't using TS, tThat sounds like it's your editor/IDE that is having the problem, not your actual codebase. Can you build your project outside your IDE without issues (after removing all the TypeScript bits you added)? Which editor or IDE is it? The solution will probably involve telling that program that you aren't actually working with TS. – kdau May 29 '21 at 08:13
  • @kadu since I couldn't resolve the issue following the solutions mentioned in the links, I have removed all bits of typescript i.e. types folder that I added, tsconfig.json and uninstalled typescript which I had installed. I am using VScode. One thing I have noticed is that when I use import the whole application breaks and not any component is rendered on the screen. However on replacing import with require, all other components expect for the one from the package are rendered and the console logs:[Vue warn]: Component is missing template or render function. at – siretole May 29 '21 at 10:39

0 Answers0