Typescript Source not showing when using webpack ts-loader

Question

I'm using webpack and ts-loader from a grunt task to transpile Typescript and generate sourcemaps for use debugging production. My team wants to be able to see the original Typescript source, not just the JavaScript source. I have pored over many pages of documentation, and many questions/answers, looking for the right solution, but so far I cannot see Typescript files in the browser, only the JavaScript version.

Our project root module, or "entry" for webpack task, webpackEntry, is a Javascript file, which requires JavaScript files, some of which were compiled from TypeScript, but some were just manually created.

I have a webpack "prod" task configured thus:

        webpack: {
        options: {
            entry: webpackEntry,
            output: {
                path: webpackDest,
                filename: 'app-min.js',
                libraryTarget: "assign",
                pathInfo: true
            },
            externals: grunt.file.readJSON('app-ui/webpack-externals.json'),
            progress: true
        },
        prod: {
            devtool: 'source-map',
            plugins: [
                new webpack.optimize.UglifyJsPlugin(),
                new webpack.optimize.OccurenceOrderPlugin(),
                new webpack.optimize.DedupePlugin(),
                new webpack.SourceMapDevToolPlugin({
                    test:  /\.tsx?$/,
                    exclude: 'node_modules',
                    module: true,
                    filename: '[file].map',
                    append: false
                })
            ],
            resolve: {
                // Add `.ts` and `.tsx` as a resolvable extension.
                extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js','.jsx']
            },
            module: {
                loaders: [
                    // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
                    { test: /\.tsx?$/, loader: 'ts-loader', exclude: 'node_modules' }
                ]
            },
            ts: {
                // configures the ts compiler:
                "compilerOptions": {
                    "target": "es5",
                    "sourceMap": true,
                    "jsx": "react",
                    "experimentalDecorators": true
                },
                "exclude": [
                    "node_modules" // add other exclusions for the ts compiler.
                ]
            }
        }...

And a tsconfig.json:

{
   "compilerOptions": {
        "target": "es5",
        "sourceMap": true
    },
    "exclude": [
        "node_modules"
      ]
}

... but all I see in Chrome Dev Tools source are the JavaScript source files. I'd like to be able to see the original JavaScript source files, as well as the original Typescript files, but not the transpiled JavaScript files.

UPDATE: I followed @basarat's suggestion below and added the source-map-loader tool. I still see only the JavaScript files in the dev-tools window.

relevant excerpt:

module: {
                loaders: [
                    // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
                    { test: /\.tsx?$/, loader: 'ts-loader', exclude: 'node_modules' }
                ],
                preLoaders: [
                    // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
                    { test: /\.js$/, loader: "source-map-loader", exclude: ['node_modules', 'ext-*', 'lib', 'tools'] }
                ]
            }, ...

Any experts in ts-loader able to assist with this? Thanks in advance for your help!

Fante

Answer 1

You need to use the source-map-loader package.

Your webpack config should be like this:

module: {
    loaders: [
        // All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'.
        { test: /\.tsx?$/, loader: "ts-loader" }
    ],

    preLoaders: [
        // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
        { test: /\.js$/, loader: "source-map-loader" }
    ]
},

This code was formerly in the TypeScript Handbook repo, but the page no longer exists.

Micropaleontology

Thanks, @basarat, I tried your suggestion. I still have the same results as before: Only the JavaScript files are showing in the browser devtools window.. :( – Fante

facepalm - I haven't been running the "clean" task on the JavaScript directories. – Fante

So, it turns out the ts-loader doesn't work for compiling our Typescript because the ts directory is completely separate from the js directory. The js directory contains the entry file, and it requires javascript files that are not there yet, because they have not yet been transpiled. – Fante

source-map-loader worked for me. Maybe you can get some help from this repo: github.com/AngularClass/angular2-webpack-starter/blob/master/… – Squint

Official npm page says to use an enforce: "pre" under module.rules instead of preLoaders. – Chinoiserie

Answer 2

You can provide devTools value to sourcemap to your webpack config like below:

module.exports = {
    entry:'./app/app',
    output:{
        filename:'bundle.js',
    },
    resolve:{
        extensions:['','.ts','.js'],
        modulesDirectories: ['node_modules']
    },
    module:{
        loaders:[
            {
                test: /\.ts$/, loader: 'ts-loader'
            }
        ]
    },
    devtool: "sourcemap" /*<=================*/
}

Microsoft's guide is located here: https://github.com/Microsoft/TypeScript-Handbook/blob/master/pages/tutorials/React%20%26%20Webpack.md

Inconsonant