title: Using Javascript module in Typescript Vue project
body: <p><strong>The problem</strong></p>
  <p>I'm trying to use <a href="https://github.com/moonwave99/fretboard.js" rel="nofollow noreferrer">https://github.com/moonwave99/fretboard.js</a> in my Vue project. I try to import the module in a component as follows:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div&gt;
      &lt;div id=&quot;fretboard&quot; /&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  &lt;script lang=&quot;ts&quot;&gt;
  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
    }
  ]);
  &lt;/script&gt;
  </code></pre>
  <p>This results in the following error:</p>
  <pre><code>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)
  </code></pre>
  <p>I've tried runing the <code>npm install @types/moonwave99__fretboard.js</code> command but that also resulted in an error, saying <code>'@types/moonwave99__fretboard.js@latest' is not in the npm registry.</code>.</p>
  <p>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?</p>
  <p><strong>Things I've tried</strong></p>
  <ol>
  <li>Creating a declaration file containing <code>declare module '@moonwave99/fretboard.js</code> in the root of my project directory</li>
  <li>Adding <code>&quot;allowJs&quot;: true</code> to my tsconfig.ts file</li>
  </ol>
  <p><strong>Additional information</strong></p>
  <p>My tsconfig looks like:</p>
  <pre><code>{
    &quot;compilerOptions&quot;: {
      &quot;target&quot;: &quot;esnext&quot;,
      &quot;module&quot;: &quot;esnext&quot;,
      &quot;strict&quot;: true,
      &quot;jsx&quot;: &quot;preserve&quot;,
      &quot;allowJs&quot;: true,
      &quot;importHelpers&quot;: true,
      &quot;moduleResolution&quot;: &quot;node&quot;,
      &quot;experimentalDecorators&quot;: true,
      &quot;skipLibCheck&quot;: true,
      &quot;esModuleInterop&quot;: true,
      &quot;allowSyntheticDefaultImports&quot;: true,
      &quot;sourceMap&quot;: true,
      &quot;baseUrl&quot;: &quot;.&quot;,
      &quot;types&quot;: [
        &quot;webpack-env&quot;,
        &quot;jest&quot;
      ],
      &quot;paths&quot;: {
        &quot;@/*&quot;: [
          &quot;src/*&quot;
        ]
      },
      &quot;lib&quot;: [
        &quot;esnext&quot;,
        &quot;dom&quot;,
        &quot;dom.iterable&quot;,
        &quot;scripthost&quot;
      ]
    },
    &quot;include&quot;: [
      &quot;src/**/*.ts&quot;,
      &quot;src/**/*.tsx&quot;,
      &quot;src/**/*.vue&quot;,
      &quot;tests/**/*.ts&quot;,
      &quot;tests/**/*.tsx&quot;
    ],
    &quot;exclude&quot;: [
      &quot;node_modules&quot;
    ]
  }
  </code></pre>