javascript - Webpack + Typescript : Getting Module Parse failed - why? -

i'm building knockoutjs project using typescript , webpack, , i'm hitting weird issue.

the module webpack failing on this:

import esplayervm "./components/es-player"; import esplayertemplate "./components/es-player.tmpl.html"; import fsbuttonvm "./components/fullscreen-button"; import fsbuttonhtml "./components/fullscreen-button.tmpl.html";   export default class registrator {      static register() {         var kocomp = (elname: string, vm: any, html: string) => {             ko.components.register(elname, { viewmodel: vm, template: html });         }          kocomp('es-player', esplayervm, esplayertemplate);         kocomp('fullscreen-button', fsbuttonvm, fsbuttonhtml);         //ko.components.register('es-player', { viewmodel: esplayervm, template: esplayertemplate });         //this.registercomponent('fullscreen-button', fsbuttonvm, fsbuttonhtml);     } } 

webpack outputs this:

error in ./componentregistration.ts module parse failed: c:\users\marlon\documents\projects\eps-ko\src\componentregistration.ts unexpected token (10:28) may need appropriate loader handle file type. | |     static register() { |         var kocomp = (elname: string, vm: any, html: string) => { |             ko.components.register(elname, { viewmodel: vm, template: html }); |         }  @ ./main.ts 16:0-50 

if remove kocomp varable, , directly register component in register method, webpack happy. had private static function can see bottom comment, webpack had same problem that.

i have googled, , others getting when typescript outputting es2016 code, have pass through babel, targetting es5 expect mine fine? not using react stuff .tsx files either.

i've used both ts-loader , awesome-typescript-loader, both have same error.

here tsconfig.json

{     "compileroptions": {         "allowsyntheticdefaultimports": true,         "module": "es2015",         "target": "es5",         "moduleresolution": "node",         "noimplicitany": true,         "sourcemap": false,         "importhelpers": true     } } 

originally hade modules set commonjs, when trying ts-loader followed example.

here webpack.config:

const path = require('path'); const webpack = require('webpack');  const extracttextplugin = require('extract-text-webpack-plugin'); const { checkerplugin } = require('awesome-typescript-loader')  // create multiple instances const extractcss = new extracttextplugin('es-player.bundle.css');  module.exports = {   context: path.resolve(__dirname, './src'),   entry: {     app: './main.ts',   },   output: {     path: path.resolve(__dirname, './dist'),     filename: 'es-player.bundle.js',   },   //devtool: "cheap-eval-source-map",   resolve: {     extensions: ['.ts', '.tsx']   },       module: {     loaders: [       {         test: /\.tsx?$/,         exclude: /node_modules/,         loader: 'ts-loader'       }     ],     rules: [       {         test: /\.css$/,         use: extractcss.extract([ 'css-loader', 'postcss-loader' ])       },       {         test: /\.less$/i,         use: extractcss.extract([ 'css-loader', 'less-loader', 'postcss-loader' ])       },       {         test: /\.tmpl.html?$/,         use: 'raw-loader'       }     ]   },   plugins: [     extractcss     //new checkerplugin()   ], }; 

versions:

typescript: 2.2.2 webpack: 2.3.3 awesome-typescript-loader: 3.1.2 ts-loader: 2.0.3 

i register them directly, wondering happening causing error.

edit

after digging , deleting code, seems webpack failing if exported module has typed parameters on method etc. wierd thought webpack working transpiled javascript generated loaders? infers trying work raw .ts files.

tl:dr use of both loaders , rules sections not supported webpack - must use 1 or other.

after hours of debugging, due having typescript loader defined in loaders section of webpack.config.js file. moving rules section fixed issue.

amended webpack.config.js file looks this:

const path = require('path'); const extracttextplugin = require('extract-text-webpack-plugin'); const { checkerplugin } = require('awesome-typescript-loader')  const extractcss = new extracttextplugin('es-player.bundle.css');  module.exports = {   context: path.resolve(__dirname, './src'),   entry: {     app: './main.ts',   },   output: {     path: path.resolve(__dirname, './dist'),     filename: 'es-player.bundle.js',   },   //devtool: "cheap-eval-source-map",   resolve: {     extensions: ['.js', '.ts', '.tsx']   },       module: {     rules: [       {         test: /\.css$/,         use: extractcss.extract([ 'css-loader', 'postcss-loader' ])       },       {         test: /\.less$/i,         use: extractcss.extract([ 'css-loader', 'less-loader', 'postcss-loader' ])       },       {         test: /\.tmpl.html?$/,         use: 'raw-loader'       },       {         test: /\.tsx?$/,         exclude: /node_modules/,         loader: 'awesome-typescript-loader'       }     ]   },   plugins: [     extractcss,     new checkerplugin()   ], }; 

both ts-loader , at-loader state define them in loaders sections on respective github pages. webpack 2 docs state put them in rules section. confusing least.