hegdeashwin hegdeashwin - 1 year ago 210
TypeScript Question

TypeScript checking front-end template files

I am new to TypeScript and loved it.
Currently, using Webpack + TypeScript + Handlebars and getting below error message:

ERROR in ./src/apps/router/routes.ts
(6,26): error TS2307: Cannot find module '../templates/homeTpl.handlebars'.

ERROR in ./src/apps/router/routes.ts
(9,27): error TS2307: Cannot find module '../templates/aboutTpl.handlebars'.

I have installed
"@types/handlebars": "^4.0.31"
, in package.json and
"handlebars": "registry:dt/handlebars#4.0.5+20160804082238"
, in typings.json


"compileOnSave": true,
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": true,
"module": "commonjs",
"moduleResolution": "node",
"target": "es5",
"removeComments": true
"include": [
"exclude": [

also my webpack.config.js includes


resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: ["", ".ts", ".js"]

module: {
loaders: [{
test: /\.ts?$/,
exclude: /node_modules/,
loader: 'ts-loader'
}, {
test: /\.handlebars?$/i,
loader: 'handlebars-loader'

I tried a lot but not able to figure out what is going wrong! https://github.com/Protocore-UI/protocore-typescript-edition.
Well, when I am excluding TypeScript and use ES6 with Webpack its working fine https://github.com/Protocore-UI/protocore-webpack-edition

Answer Source

I fixed the issue by just adding require declaration :

declare function require(module: string): any;
let HomeTemplate = require('../templates/homeTpl.handlebars');

Visit https://github.com/Microsoft/TypeScript/issues/5151 for more information

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download