In my client-side JavaScript library written in TypeScript, I am attempting to incorporate Handlebars. However, when I try to import using
import * as Handlebars from 'handlebars'Switching to
import * as Handlebars from 'handlebars/runtime''handlebars' did not resolve the issue for me.
After researching and coming across a similar problem discussed here, I attempted adding the Handlebars substitution to my tsconfig file without success in resolving the module finding issue.
I feel it is crucial to mention that I am utilizing umd compilation. While commonjs compilation works fine with the reference, I understand that commonjs is typically recommended for Node.js applications. Since I am developing a client-side library, this solution does not seem suitable. Targeting umd offers both commonjs and amd compilation options, which I believed would be ideal.
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 desired outcome is to successfully integrate Handlebars into my library.