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

(Just a shot in the dark) Do you by chance have any outdated compiled javascript in the same directory as your ts? I had an issue similar to this which ended up being cause by some out of date compiled files. — Code2Code, Mar 22 '19 at 17:06
@Code2Code no, cleaned everything up. Is there enough to have `export class Api { ... }` or do I need to instantiate it in that file too? — Claudiu Creanga, Mar 22 '19 at 17:11

felixmosh · Accepted Answer · 2019-12-30T13:39:36.593

270

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

edited Dec 30 '19 at 13:39

answered Mar 22 '19 at 17:12

felixmosh

32,615
9
69
88

yes, it works like that, but no js files are created. I was expecting that webpack will create a bundle.js file – Claudiu Creanga Mar 22 '19 at 17:21
5

"noEmit": false is necessary, but also make sure the files ou want to bundle (and their refs) are in "include" in tsconfig.json. Was not expecting the noEmit issue with Webpack. – George Onofrei Oct 28 '19 at 08:17
3

Also check for `noEmitOnError` not being set to `true`! – Brady Holt Jul 02 '21 at 19:56
1

This worked for me as well when coverting a simple react app to typescript. Thank you! – Brandon0050 May 18 '22 at 08:05
1

Also emitDeclarationOnly should not be true !!! – kaya Jan 12 '23 at 22:42

score 8 · Answer 2 · edited Jul 07 '21 at 07:41

8

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

edited Jul 07 '21 at 07:41

Josef

2,869
2
22
23

answered Jul 07 '21 at 07:02

Soshiv Upreti

101
1
6

1

why not use `ts-loader` with the `ts` file? @Soshiv Upreti – Dolphin Jan 30 '22 at 17:23
check this https://stackoverflow.com/questions/49624202/why-use-babel-loader-with-ts-loader @Dolphin – Soshiv Upreti Feb 02 '22 at 17:08

Webpack with typescript getting TypeScript emitted no output error

2 Answers2

Linked