Debugging typescript with source maps and webpack

Question

I have project written in Typescript and I want to be able to debug it (either in Chrome Dev Tools or in Intellij).

At first I saw that Typescript's import functionality was not supported. So I tried using Webpack along with webpack dev server but this failed completely. Even though my application was working (due to having a single bundle.js file that has all the code) it would be unable to match the code with the given source maps and this making debugging impossible.

After I stopped using webpack I tried adding require.js as a dependency to resolve the require is not defined error I was getting. That worked but now I'm stuck again and getting this:

Uncaught ReferenceError: exports is not defined

I have no idea why this isn't working. I want to be make my application work (either through webpack or being able to resolve import statements after transpilation) and still be able to debug the code using the typescript-produced source-maps. How can I achieve this?

I'm attaching my config files in case there is something missing there:

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "sourceMap": true
  },
  "include": [
    "scripts/**/*"
  ],
  "exclude": [
    "node_modules"
  ]
}

webpack.config.js:

module.exports = {
    resolve: {
        extensions: [/*'.ts', '.tsx', */'.js']
    },
    entry: './scripts/main.js',
    output: {
        path: '/',
        filename: 'app.js'
    },
    module: {
        rules: [
            { test: /.js$/, loader: 'source-map-loader', enforce: 'pre' }
        ],
        loaders: [
            { test: /.tsx?$/, loader: 'ts-loader', exclude: /node_modules/ },
            {test: /.css$/, loader: "style!css"}
        ]
    },
    watch: true
};

question from:https://stackoverflow.com/questions/42881493/debugging-typescript-with-source-maps-and-webpack

Answer 1

To enable debugging with webpack, add devtool: "source-map" to your webpack.config.js.

To load files using require.js, change "module": "amd" in tsconfig.json. require.js does not support loading commonjs modules.