hegdeashwin hegdeashwin - 1 month ago 13
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

tsconfig.json

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


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

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

Comments