title: How to fix handlebars 'module not found' in typescript when compiling to umd
body: <p>I am trying to use handlebars in a client side javascript library that I am writing in typescript, when I use the <code>import * as Handlebars from 'handlebars'</code> I get an error message saying that typescript "cannot find module typescript" </p>
  
  <p>I have tried importing <code>import * as Handlebars from 'handlebars/runtime'</code> instead of just <code>handlebars</code> no luck. </p>
  
  <p>I found a similar problem <a href="https://github.com/helpers/handlebars-helpers/issues/261" rel="noreferrer">here</a> and have tried adding the handle bars substitution to my tsconfig file, this does not help with finding the module</p>
  
  <p>The reason I feel it is important to specify that I am running a umd compilation is that if I set it to commonjs compilation then it seems to have no problem finding that reference but from the research that I have performed commonjs is only recommended when you want to use the library as part of a nodejs application (maybe running in a server environment) seeing as this is a client side library that I am creating I don't believe that this is a suitable solution, all though someone may be able to prove me wrong. Targeting umd seems to provide both commonjs and amd compilation so I thought that would be a "best of both worlds" solution </p>
  
  <p>tsconfig:</p>
  
  <pre><code>{
    "compilerOptions": {
      "target": "es5",
      "module": "umd",
      "strict": true,
      // "paths": {
      //   "handlebars": ["handlebars/dist/handlebars.min.js"]
      // },
      "esModuleInterop": true   
    }
  }
  
  
  </code></pre>
  
  <p>package json: </p>
  
  <pre><code>{
    "name": "test",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" &amp;&amp; exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "dependencies": {
      "handlebars": "^4.1.2"
    }
  }
  </code></pre>
  
  <p>main.ts:</p>
  
  <pre><code>import * as Handlebars from 'handlebars'
  
  export function hello() {
      Handlebars.compile("");
  }
  </code></pre>
  
  <p>The expected outcome here is to use handlebars as part of my library.</p>