Webpack + React + Typescript

Question

Is it possible to use webpack with React and Typescript and be able to bundle those into a web bundle, but still be able to debug original TypeScript and React code? In webpack I'm using ts-loader and ts-jsx-loader plus devtool: "source-map", but when I try to do browser debugging, I can't see original ts code but instead I see code which has been changed by webpack.

My current basic webpack.config.js file:

var webpack = require('webpack');
module.exports = {
  entry: ['./app/main.ts'],
  output: {
    path: './build',
    filename: 'bundle.js'
  },
  debug: true,
  devtool: 'source-map',
  plugins: [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.UglifyJsPlugin()
  ],
  resolve: {
    extensions: ['', '.ts', '.js']
  },
  module: {
    loaders: [
      {
        test: /\.ts$/,
        loader: 'ts-loader!ts-jsx-loader'
      }
    ]
  }
};

tsconfig.json:

{
    "compileOnSave": false,
    "version": "1.5.0-alpha",
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "noLib": false,
        "sourceMap": true,
        "noImplicitAny": true,
        "removeComments": true
    },
    "files": [
        "./AppComponent.ts",
        "./libs/jsx.d.ts",
        "./libs/react.d.ts",
        "./libs/webpack-runtime.d.ts",
        "./main.ts"
    ]
}

For example - my oryginal .ts file looks like:

import React = require('react');

class AppComponent extends React.Component<any, any> {
  render () {
    return React.jsx(`
      <h1>He world!</h1>
    `);
  }
};
export = AppComponent;

and in chrome debugger it looks like this:

var __extends = this.__extends || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    __.prototype = b.prototype;
    d.prototype = new __();
};
var React = __webpack_require__(2);
var AppComponent = (function (_super) {
    __extends(AppComponent, _super);
    function AppComponent() {
        _super.apply(this, arguments);
    }
    AppComponent.prototype.render = function () {
        return (React.createElement("h1", null, "He world!"));
    };
    return AppComponent;
})(React.Component);
;
module.exports = AppComponent;


/*****************
 ** WEBPACK FOOTER
 ** ./app/AppComponent.ts
 ** module id = 158
 ** module chunks = 0
 **/

apokryfos · Accepted Answer · 2025-06-15 22:28:15Z

2

You don't need to use the ts-jsx-loader.

In your tsconfig.json file you just need something like this:

{
  "compilerOptions": {
    "jsx": "react",
    "sourceMap": true,
    // ... other options
  }
}

And of course, you still need the devtool option in the webpack config file

edited Jun 15 at 22:28

apokryfos

40.9k11 gold badges85 silver badges128 bronze badges

answered Apr 2, 2016 at 12:48

thitemple

6,0675 gold badges47 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

James Brantly · Accepted Answer · 2015-07-13 18:34:37Z

0

It's likely that you have not specified sourceMap in your tsconfig.json file, so the TypeScript compiler is not outputting sourcemaps.

answered Jul 13, 2015 at 18:34

James Brantly

5692 silver badges9 bronze badges

5 Comments

barylov Over a year ago

I've added sourceMap to tsconfig.json but still doesn't work

James Brantly Over a year ago

So I just tried this out using your configuration. The only thing I noted was that, assuming you're using Chrome, you need to keep the devtools open while you load the page, otherwise the sourcemap isn't loaded. Also note that both the original Javascript and the TypeScript are both shown under sources, not just the TypeScript. Lastly, to ensure everything is OK, you should check your bundle.js to make sure it has a sourceMappingURL and that the bundle.js.map file looks OK (you should see some TypeScript in it)

barylov Over a year ago

Thank you for your help but unfortunately it still doesn't work. I've posted some example showing original code and code from debugger.

James Brantly Over a year ago

In your output, do you have a file called bundle.js.map? (should sit next to bundle.js)

wmock Over a year ago

@JamesBrantly I'm running into a similar situation as the original SO owner and I do see a bundle.js.map file. However, I'm still unable to see the source maps in Chrome. Any thoughts on what else this could be?

Collectives™ on Stack Overflow

Webpack + React + Typescript

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related