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
- Creating a declaration file containing
declare module '@moonwave99/fretboard.jsin the root of my project directory - Adding
"allowJs": trueto 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"
]
}