How to fix handlebars 'module not found' in typescript when compiling to umd

Question

I am trying to use handlebars in a client side javascript library that I am writing in typescript, when I use the import * as Handlebars from 'handlebars' I get an error message saying that typescript "cannot find module typescript"

I have tried importing import * as Handlebars from 'handlebars/runtime' instead of just handlebars no luck.

I found a similar problem here and have tried adding the handle bars substitution to my tsconfig file, this does not help with finding the module

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

tsconfig:

{
  "compilerOptions": {
    "target": "es5",
    "module": "umd",
    "strict": true,
    // "paths": {
    //   "handlebars": ["handlebars/dist/handlebars.min.js"]
    // },
    "esModuleInterop": true   
  }
}

package json:

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "handlebars": "^4.1.2"
  }
}

main.ts:

import * as Handlebars from 'handlebars'

export function hello() {
    Handlebars.compile("");
}

The expected outcome here is to use handlebars as part of my library.

Answer 1

I have had luck with import Handlebars from "handlebars/dist/handlebars.js"