title: .tsx webpack compile fails: Unexpected token <
body: <p>My app compiles with .ts, .js, and .jsx files and runs.  Now I try changing a .jsx file to .tsx and it breaks.</p>
  
  <p>How do I fix this compile error:</p>
  
  <pre><code>ts-loader: Using typescript@1.6.2 and C:\users\ruser\Desktop\Downloads\divinote\site\tsconfig.json                                                                                                                                                    67% 226/234 build modulesModuleParseError: Module parse failed: C:\users\ruser\Desktop\Downloads\divinote\site\node_modules\ts-loader\index.js?cacheDirectory!C:\users\ruser\Desktop\Downloads\divinote\site\src\app\views\header\DiviAppBar.tsx 
  Line 15: Unexpected token &lt;
  You may need an appropriate loader to handle this file type.
  |     }
  |     DiviAppBar.prototype.render = function () {
  |         return (&lt;AppBar /&gt;);
  |     };
  |     return DiviAppBar;
      at DependenciesBlock.&lt;anonymous&gt; (C:\users\ruser\Desktop\Downloads\divinote\site\node_modules\webpack\lib\NormalModule.js:113:20)
      at DependenciesBlock.onModuleBuild (C:\users\ruser\Desktop\Downloads\divinote\site\node_modules\webpack-core\lib\NormalModuleMixin.js:310:10)
      at nextLoader (C:\users\ruser\Desktop\Downloads\divinote\site\node_modules\webpack-core\lib\NormalModuleMixin.js:275:25)
      at C:\users\ruser\Desktop\Downloads\divinote\site\node_modules\webpack-core\lib\NormalModuleMixin.js:292:15
      at context.callback (C:\users\ruser\Desktop\Downloads\divinote\site\node_modules\webpack-core\lib\NormalModuleMixin.js:148:14)
      at Object.loader (C:\users\ruser\Desktop\Downloads\divinote\site\node_modules\ts-loader\index.js:431:5)
      at WEBPACK_CORE_LOADER_EXECUTION (C:\users\ruser\Desktop\Downloads\divinote\site\node_modules\webpack-core\lib\NormalModuleMixin.js:155:71)
      at runSyncOrAsync (C:\users\ruser\Desktop\Downloads\divinote\site\node_modules\webpack-core\lib\NormalModuleMixin.js:155:93)
      at nextLoader (C:\users\ruser\Desktop\Downloads\divinote\site\node_modules\webpack-core\lib\NormalModuleMixin.js:290:3)
      at C:\users\ruser\Desktop\Downloads\divinote\site\node_modules\webpack-core\lib\NormalModuleMixin.js:259:5
      at Storage.finished (C:\users\ruser\Desktop\Downloads\divinote\site\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:38:16)
      at C:\users\ruser\Desktop\Downloads\divinote\site\node_modules\graceful-fs\graceful-fs.js:76:16
      at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:404:3)                                                                                                                                                                                     69% 337/338 build moduleschild_process.js:484
  </code></pre>
  
  <p>when I compile this code:</p>
  
  <pre><code>"use strict";
  import React = require('react');
  import AppBar = require('material-ui/lib/app-bar');
  
  class DiviAppBar extends React.Component
  {
      render()
      {
          return (
              &lt;AppBar  /&gt;
          );
      }
  }
  
  export = DiviAppBar;
  </code></pre>
  
  <p>with this webpack config file:</p>
  
  <pre><code>'use strict';
  
  var webpack = require('webpack');
  var HtmlWebpackPlugin = require('html-webpack-plugin');
  var CopyWebpackPlugin = require('copy-webpack-plugin');
  var path = require('path');
  var rootPath = __dirname; //site
  var srcPath = path.join(rootPath, 'src'); //site/src
  
  module.exports =
  {
      bail: true,
      cache: true,
      context: rootPath,
      debug: true,
      devtool: 'inline-source-map', //'eval-cheap-module-source-map','inline-source-map'
      target: 'web',
      devServer:
      {
          contentBase: './dist',
          historyApiFallback: true
      },
      entry:
      {
          app: path.join(srcPath, 'app/main.jsx'),
          lib: ['react', 'react-router']
      },
      output:
      {
          path: path.join(rootPath, 'dist'),
          publicPath: '',
          filename: '[name].js',
          library: ['[name]', '[name]'],
          pathInfo: true
      },
      resolve:
      {
          root: srcPath,
          extensions: ['', '.js', '.jsx', '.ts', '.tsx'],
          modulesDirectories: ['node_modules', 'src', 'typings']
      },
      module:
      {
          loaders:
          [
              {test: /\.js$/, loader: 'babel-loader?cacheDirectory', exclude: /(node_modules|bower_components)/ },
              {test: /\.jsx$/, loader: 'babel-loader?cacheDirectory', exclude: /(node_modules|bower_components)/ },
              {test: /\.ts$/, loader: 'ts-loader?cacheDirectory', exclude: /(node_modules|bower_components)/ },
              {test: /\.tsx$/, loader: 'ts-loader?cacheDirectory', exclude: /(node_modules|bower_components)/ },
              {test: /\.scss$/, loaders: ['style', 'css', 'sass']},
              {test: /\.png$/, loader: 'file-loader'},
              {test: /\.jpg$/, loader: 'file-loader'},
              {test: /\.jpeg$/, loader: 'file-loader'},
              {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader?mimetype=image/svg+xml'},
              {test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader?mimetype=application/font-woff"},
              {test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader?mimetype=application/font-woff"},
              {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader?mimetype=application/octet-stream"},
              {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader"},
          ]
      },
      plugins:
      [
          new CopyWebpackPlugin
          ([
              { from: 'src/images', to: 'images' }
          ]),
          new webpack.optimize.CommonsChunkPlugin('lib', 'lib.js'),
          new HtmlWebpackPlugin
          ({
              inject: true,
              template: 'src/index.html'
          }),
          new webpack.NoErrorsPlugin()
      ]
  };
  </code></pre>
  
  <p>and this tsconfig.json file:</p>
  
  <pre><code>{
      "compilerOptions":
      {
          "jsx": "preserve",
          "noImplicitAny": true,
          "module": "commonjs",
          "removeComments": false,
          "sourceMap": true,
          "target": "es5"
      },
      "files": [],
      "exclude":
      [
          "node_modules",
          "dist"
      ]
  }
  </code></pre>