Can't debug React+Typescript in browser. JS files not generated in output directory

Question

I've configured Typescript with Webpack for a React project. Problem is, I can't debug from my browser using the .JS source. Only the bundle.js is being generated.

tsconfig.json

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "module": "commonjs",
        "target": "es6",
        "jsx": "react"
    },
    "include": [
        "./src/**/**/*"
    ]
}

webpack.config.js (UPDATED)

const path = require('path')
module.exports = {
    mode: 'development',
    entry: "./src/index.tsx",
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, './dist')
    },
    resolve: {
        // Add '.ts' and '.tsx' as resolvable extensions.
        extensions: [".ts", ".tsx", ".js", ".json"]
    },
    devtool: 'source-map',
    module: {
        rules: [
            // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
            {  test: /\.tsx?$/, loader: "ts-loader" },
            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
            { enforce: "pre", test: /\.js?$/, loader: "source-map-loader" }
        ]
    },
    // When importing a module whose path matches one of the following, just
    // assume a corresponding global variable exists and use that instead.
    // This is important because it allows us to avoid bundling all of our
    // dependencies, which allows browsers to cache those libraries between builds.
    externals: {
        "react": "React",
        "react-dom": "ReactDOM",
        "react-router-dom": "ReactRouterDOM",
        "reactstrap": "Reactstrap",
        "flux" : "Flux"
    }
};

Now this is my output in my dist directory

.
├── bundle.js
└── bundle.js.map

My intention is to get the .js sources for all my .tsx files so I can debug in my browser by just using the console's source tab.

Shanon Jackson · Accepted Answer · 2019-05-05 05:44:44Z

1

You'll need to add this to your webpack config and read the appopriate documentation.

devtool: 'source-map',

answered May 5, 2019 at 5:44

Shanon Jackson

6,6511 gold badge26 silver badges42 bronze badges

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

3 Comments

user3261062 Over a year ago

Hi @Shanon I tried that before and it doesn't work either.

Shanon Jackson Over a year ago

Try get rid of this as you want source maps from typescript not javascript { enforce: "pre", test: /\.js?$/, loader: "source-map-loader" } just the loader

user3261062 Over a year ago

same issue. I also tried that. Only the bundle.js and bundle.js.map is being created.

Scc · Accepted Answer · 2019-05-06 01:30:34Z

0

I also encountered the same problem before. set webpack config devtool to cheap-module-eval-source-map

devtool: 'cheap-module-eval-source-map'

answered May 6, 2019 at 1:30

Scc

5265 silver badges5 bronze badges

Collectives™ on Stack Overflow

Can't debug React+Typescript in browser. JS files not generated in output directory

tsconfig.json

webpack.config.js (UPDATED)

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

tsconfig.json

webpack.config.js (UPDATED)

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related