Webpack with typescript getting TypeScript emitted no output error

Question

I've got this configuration from https://www.npmjs.com/package/ts-loader:

webpack.config.js:

var path = require('path');
var webpack = require('webpack');

module.exports = {
    mode: "development",
    devtool: "inline-source-map",
    entry: "./src/Api.ts",
    output: {
        filename: "bundle.js"
    },
    resolve: {
        // Add `.ts` and `.tsx` as a resolvable extension.
        extensions: [".ts", ".tsx", ".js"]
    },
    module: {
        rules: [
            // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
            { test: /\.tsx?$/, loader: "ts-loader" }
        ]
    }
};

./src/Api.ts:

export class Api {
...
}

But when I run webpack I get:

Error: TypeScript emitted no output for Api.ts

Answer 1

Check that you don't have noEmit set to true In your tsconfig.json file.

Answer 2

First change webpack config entry like index.js to index.tsx. Second make sure rule added for tsx file like:

{   test: /\.(ts|js)x?$/,   exclude: /node_modules/,   use: {     loader: "babel-loader",     options: {       presets: [         "@babel/preset-env",         "@babel/preset-react",         "@babel/preset-typescript",       ],     },   }, },