title: How to import local typescript module?
body: <p>I am building a TypeScript module and I want to eventually publish to NPM but I first want to import it into another local host project to test. Both projects are in TypeScript.</p>
  <p>The module successfully compiles with <code>tsc</code> and outputs what appears to be correct files into the <code>dist</code> directory. The module includes a <a href="https://storybook.js.org/" rel="nofollow noreferrer">storybook</a> that imports and compiles the module successfully through relative local paths.</p>
  <p>In the host project I have tried both <code>npm link</code> and local <code>npm install ../localmodule</code> to import the module.</p>
  <p>The module tsconfig is:</p>
  <pre><code>{
    &quot;compilerOptions&quot;: {
      &quot;target&quot;: &quot;es5&quot;,
      &quot;module&quot;: &quot;commonjs&quot;,
      &quot;jsx&quot;: &quot;preserve&quot;,
      &quot;declaration&quot;: true,
      &quot;declarationMap&quot;: true,
      &quot;outDir&quot;: &quot;./dist&quot;,
      &quot;rootDir&quot;: &quot;./src&quot;,
      &quot;strict&quot;: true,
      &quot;noImplicitAny&quot;: true,
      &quot;typeRoots&quot;: [&quot;./src/types&quot;],
      &quot;esModuleInterop&quot;: true,
      &quot;skipLibCheck&quot;: true,
      &quot;forceConsistentCasingInFileNames&quot;: true
    }
  }
  </code></pre>
  <p>The module <code>package.json</code> has</p>
  <pre><code>  &quot;main&quot;: &quot;dist/index.js&quot;,
    &quot;types&quot;: &quot;dist/index.d.ts&quot;,
  </code></pre>
  <p>When I then try to compile the host project with the local module imported I get a bunch of errors that I am not seeing in the modules <code>storybook</code> or during development.</p>
  <ol>
  <li>A critical path error that indicates the host project is not seeing one of modules exports is missing or not found.</li>
  </ol>
  <pre><code>&lt;e&gt; ERROR in ../react-regl/dist/index.js 9:18-51
  &lt;e&gt; Module not found: Error: Can't resolve './components/ReglFrame' in '/Users/kevzettler/code/react-regl/dist'
  &lt;e&gt;  @ ./src/Ground.ts 6:0-30 11:11-21 12:15-27 20:26-30 31:13-17
  &lt;e&gt;  @ ./src/RenderStore.ts 24:0-48 271:12-24 292:12-18 488:28-40 497:28-34
  &lt;e&gt;  @ ./src/ClientStore.ts 18:0-40 74:32-43
  &lt;e&gt;  @ ./src/browser.worker.ts 1:0-40 10:20-31
  &lt;e&gt;  @ ./src/index.ts 83:21-77
  </code></pre>
  <p>This export is confirmed in the modules <code>dist</code> directory:</p>
  <pre><code>kevs-mbp:react-regl kevzettler$ ls dist/components/
  ReglFrame.d.ts      ReglFrame.d.ts.map  ReglFrame.jsx
  </code></pre>
  <ol>
  <li>And some type errors that indicate the host project is missing or infering the types differently than the <code>storybook</code></li>
  </ol>
  <pre><code>&lt;e&gt; ERROR in /Users/kevzettler/code/hypeworks/src/Ground.ts
  &lt;e&gt; ./src/Ground.ts
  &lt;e&gt; [tsl] ERROR in /Users/kevzettler/code/hypeworks/src/Ground.ts(17,17)
  &lt;e&gt;       TS2339: Property 'clear' does not exist on type 'ReactRegl'.
  &lt;e&gt;  @ ./src/RenderStore.ts 24:0-48 271:12-24 292:12-18 488:28-40 497:28-34
  &lt;e&gt;  @ ./src/ClientStore.ts 18:0-40 74:32-43
  &lt;e&gt;  @ ./src/browser.worker.ts 1:0-40 10:20-31
  &lt;e&gt;  @ ./src/index.ts 83:21-77
  &lt;e&gt;
  &lt;e&gt; ERROR in /Users/kevzettler/code/hypeworks/src/Ground.ts
  &lt;e&gt; ./src/Ground.ts
  &lt;e&gt; [tsl] ERROR in /Users/kevzettler/code/hypeworks/src/Ground.ts(19,21)
  &lt;e&gt;       TS2339: Property 'texture' does not exist on type 'ReactRegl'.
  &lt;e&gt;  @ ./src/RenderStore.ts 24:0-48 271:12-24 292:12-18 488:28-40 497:28-34
  &lt;e&gt;  @ ./src/ClientStore.ts 18:0-40 74:32-43
  &lt;e&gt;  @ ./src/browser.worker.ts 1:0-40 10:20-31
  &lt;e&gt;  @ ./src/index.ts 83:21-77
  </code></pre>
  <p>I can confirm these <code>clear</code> and <code>texture</code> methods are defined on the <code>.d.ts</code> files from the module.</p>
  <p>The host projects tsconfig looks like</p>
  <pre><code>{
    &quot;compilerOptions&quot;: {
      &quot;outDir&quot;: &quot;./dist/&quot;,
      &quot;sourceMap&quot;: true,
      &quot;noImplicitAny&quot;: true,
      &quot;module&quot;: &quot;esnext&quot;,
      &quot;target&quot;: &quot;es5&quot;,
      &quot;jsx&quot;: &quot;react&quot;,
      &quot;allowJs&quot;: true,
      &quot;allowSyntheticDefaultImports&quot;: true,
      &quot;experimentalDecorators&quot;: true,
      &quot;useDefineForClassFields&quot;: true,
      &quot;lib&quot;: [
        &quot;es2019&quot;,
        &quot;dom&quot;
      ],
      &quot;exclude&quot;: [
        &quot;./src/server.worker.ts&quot;,
        &quot;./src/server.ts&quot;,
        &quot;./src/network/ServerNetwork.ts&quot;,
        &quot;./src/Worker/implementation.worker_threads.ts&quot;
      ]
    }
  }
  </code></pre>