ts-loader: Problem with TSX

Hi, thanks for the great and updated ts-loader. I seem to be struggling with the “*.tsx” files, for which I keed receiving following error:

ERROR in ../app/components/router.tsx
Module parse failed: /Users/tomi/Documents/Programming/Github/meteor-webpack-react/node_modules/ts-loader/index.js!/Users/tomi/Documents/Programming/Github/meteor-webpack-react/app/components/router.tsx Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import { BlogHome } from './blog/blog';
| import ReactLayout from './react-layout';
| //console.log(BlogHome);
 @ ../app/main_client.js 15:0-30

This is my config:

resolve: {
    extensions: ['', '.js', '.jsx', '.ts', '.tsx' ],
    alias: {
      app: path.join(__dirname, '../app'),
    },
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel?stage=0',
        exclude: /node_modules|lib/,
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      },
      {
        test: /(\.png|\.eot|\.svg|\.woff|\.ttf)/,
        loader: 'file'
      },
      // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
      {
        test: /\.ts(x?)$/,
        loader: 'ts-loader'
      }
    ],

Typescript installed is 1.6.0 beta.

Would you know what the problem can be? Thanks!

About this issue

Original URL
State: closed
Created 9 years ago
Comments: 18 (3 by maintainers)

Most upvoted comments

install awesome-typescript-loader. Add in webpack.config.js:

...
        loaders: [
            {
                test: /\.tsx?$/,
                loaders: [
                    'react-hot-loader',
                    'awesome-typescript-loader'
                ],
                include: path.join(__dirname, 'src')
            }
        ]

yakovenkoroman1993 on Feb 16, 2017

Ok, so I did manage to figure it out. I checked and I was pointing to .ts files in webpack and karma configs, which is stupid because I use typescript compiler and then running tests from the .js files. So I changed that to .js in configs, deleted all the unnecessary stuff from typescript in configs and it works!

vivacenontroppo on Dec 16, 2018

I did the same mistake. The “loaders” section should be inside “module” section

Instead of

{ loaders: [] }

You should use

{ module: { loader: [] } }

oricalvo on Sep 8, 2016

it disables the hot-code-reload 😦

@tomitrescak is you mean React Hot Loader, you need to enable loose mod for Babel and it will work.

s-panferov on Sep 13, 2015

Hi, as you mention in your blogpost following configuration makes the loader work:

{
        test: /\.tsx?$/,
        loader: 'babel!ts-loader'
      }

BUT

it disables the hot-code-reload 😦

I tried to enable the output to ES5 so that I omit the babel step to see if it works, but then, suddenly it stops processing TSX files with a following error:

ERROR in ../app/components/App.tsx
Module parse failed: /Users/tomi/Documents/Programming/Github/meteor-webpack-react-tomi/node_modules/ts-loader/index.js!/Users/tomi/Documents/Programming/Github/meteor-webpack-react-tomi/app/components/App.tsx Line 27: Unexpected token <
You may need an appropriate loader to handle this file type.
|     };
|     PostsView.prototype.render = function () {
|         return (<div className="App">
|         <blaze_template_1.default template={Template["loginButtons"]}/>
|         <h1>Hello Webpack!</h1>
 @ ../app/main_client.js 13:21-48

Any idea? THANKS!

tomitrescak on Sep 13, 2015

Yup. Basically you’ve got TypeScript configured to output ES6 which webpack doesn’t understand. You should either configure TypeScript to target ES5 or run Babel after ts-loader, like loader: 'babel!ts'.

Detailed info can be found here: http://www.jbrantly.com/es6-modules-with-typescript-and-webpack/

jbrantly on Sep 9, 2015