title: You may need an appropriate loader to handle this file type. Using webpack & less
body: <p>I'm trying to set up a SDE with webpack, less and typescript.But I am stuck by the error:</p>
  
  <pre><code>ERROR in ./src/index.js                                                                                            
  Module parse failed: D:\wamp\www\project\node_modules\.0.1.5@source-map-loader\index.js!D:\wamp\www\project\src\index.js Unexpected token (8:4)                                                                                       
  You may need an appropriate loader to handle this file type.                                                       
  SyntaxError: Unexpected token (8:4)   
  </code></pre>
  
  <p>This is my config file(webpack.config.js) of webpack:</p>
  
  <pre><code>var path = require("path");
  module.exports = {
      entry: "./src/index.js",
      output: {
          path: path.resolve(__dirname,"dist"),
          filename: "bundle.js",
  
      },
      devtool: "source-map",
  
      resolve: {
          extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
      },
      module: {
          lessLoaders: [
              {test: /\.less$/, loader: "style!css!less?strictMath&amp;noIeCompat"}
          ],
          loaders: [
              { test: /\.tsx?$/, loader: "ts-loader" }
          ],
          preLoaders: [
              { test: /\.js$/, loader: "source-map-loader" }
          ]
      }, 
  
      devServer: {
          contentBase: "./",
          colors: true,
          historyApiFallback: true,
          inline: true
      },
      externals: {
          "react": "React",
          "react-dom": "ReactDOM"
      },
  };
  </code></pre>
  
  <p>And package.json</p>
  
  <pre><code>{
    "name": "project",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" &amp;&amp; exit 1"
    },
    "author": "",
    "license": "ISC",
    "dependencies": {
      "@types/react": "^0.14.41",
      "@types/react-dom": "^0.14.18",
      "react": "^15.3.2",
      "react-dom": "^15.3.2"
    },
    "devDependencies": {
      "autoprefixer": "^6.5.1",
      "css-loader": "^0.25.0",
      "less": "^2.7.1",
      "less-loader": "^2.2.3",
      "postcss-loader": "^1.0.0",
      "source-map-loader": "^0.1.5",
      "style-loader": "^0.13.1",
      "ts-loader": "^0.9.4",
      "typescript": "^2.0.3",
      "webpack-dev-server": "^1.16.2"
    }
  }
  </code></pre>
  
  <p>Finally, the index.js</p>
  
  <pre><code>import * as React from "react";
  import * as ReactDOM from "react-dom";
  import * as styles from "./Greeter.less";
  
  import { Hello } from "./components/Hello";
  
  ReactDOM.render(
      &lt;Hello className={styles.html}/&gt;,
      document.getElementById("example")
  );
  </code></pre>
  
  <p>Do I need to add some extra loader plugins to compile my project? </p>
  
  <hr>
  
  <p>This is the tsconfig.json file.</p>
  
  <pre><code>{
      "compilerOptions": {
          "outDir": "./dist/",
          "sourceMap": true,
          "noImplicitAny": true,
          "module": "commonjs",
          "target": "es5",
          "jsx": "react"
      },
      "files": [
          "./src/components/Hello.tsx"
      ]
  }
  </code></pre>
  
  <p>And the Hello.tsx</p>
  
  <pre><code>import * as React from "react";
  
  export interface HelloProps { className: string}
  
  export class Hello extends React.Component&lt;HelloProps, {}&gt; {
      render() {
          return &lt;h1 className={this.props.className}&gt;Hello from Typescript and React!&lt;/h1&gt;;
      }
  }
  </code></pre>