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!

score 4 · Answer 1 · edited May 19 '23 at 06:28

4

You need to use the sourcemap loader. This is covered here:

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" }
    ]
},

edited May 19 '23 at 06:28

Robert MacLean

38,975
25
98
152

answered Mar 31 '16 at 00:04

basarat

261,912
58
460
511

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.. :( – GLaDOS Mar 31 '16 at 17:37
*facepalm* - I haven't been running the "clean" task on the JavaScript directories. – GLaDOS Mar 31 '16 at 21:23
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. – GLaDOS Mar 31 '16 at 22:17
source-map-loader worked for me. Maybe you can get some help from this repo: https://github.com/AngularClass/angular2-webpack-starter/blob/master/config/webpack.common.js – apreg Jun 11 '16 at 13:29

score 0 · Answer 2 · edited Jun 29 '17 at 12:18

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

Typescript Source not showing when using webpack ts-loader

2 Answers2