CODEWITHSUNDEEP
javascriptnode.jstypescriptvue.jsnode-modules
Sven
Sven

Reputation: 45

Using Javascript module in Typescript Vue project

The problem

I'm trying to use https://github.com/moonwave99/fretboard.js in my Vue project. I try to import the module in a component as follows:

<template>
  <div>
    <div id="fretboard" />
  </div>
</template>
<script lang="ts">
import { Fretboard } from '@moonwave99/fretboard.js';
const fretboard = new Fretboard({
  el: '#fretboard',
  fretColor: 'blue',
  dotFill: 'red'
});
fretboard.render([
  {
    string: 5,
    fret: 3
  },
  {
    string: 4,
    fret: 2
  },
  {
    string: 2,
    fret: 1
  }
]);
</script>

This results in the following error:

Could not find a declaration file for module '@moonwave99/fretboard.js'. '/Users/xxx/guitar-apps/node_modules/@moonwave99/fretboard.js/dist/fretboard.cjs.js' implicitly has an 'any' type.
  Try `npm install @types/moonwave99__fretboard.js` if it exists or add a new declaration (.d.ts) file containing `declare module '@moonwave99/fretboard.js';`Vetur(7016)

I've tried runing the npm install @types/moonwave99__fretboard.js command but that also resulted in an error, saying '@types/moonwave99__fretboard.js@latest' is not in the npm registry..

I've been looking all over the place, but couldn't find a solution that worked for my project. Anybody out there who has a solution to my problem?

Things I've tried

  1. Creating a declaration file containing declare module '@moonwave99/fretboard.js in the root of my project directory
  2. Adding "allowJs": true to my tsconfig.ts file

Additional information

My tsconfig looks like:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "allowJs": true,
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "jest"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

Upvotes: 2

Views: 3790

Answers (2)

Sham Fiorin
Sham Fiorin

Reputation: 531

Solved with on file src/.env.d.ts add declare module 'vue-image-zoomer'.

All done. Vanished the error of module not found.

Happy coding.

Upvotes: 1

tony19
tony19

Reputation: 138226

The .d.ts file should be in one of the include paths configured in tsconfig.json, and according to the tsconfig.json you've posted, that's src or tests. These typings are typically stored in src root (you'll see src/shims.vue.d.ts in a Vue CLI-generated project).

You could add a src/fretboard.d.ts file, containing declare module '@moonwave99/fretboard.js'. Then, you'd have to restart VS Code, so that the typings are indexed properly, which would resolve the error.

Upvotes: 1

Related Questions