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
– Code2Code, Commented Mar 22, 2019 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
– Claudiu Creanga, Commented Mar 22, 2019 at 17:11

felixmosh · Accepted Answer · 2019-12-30 13:39:36Z

318

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

edited Dec 30, 2019 at 13:39

answered Mar 22, 2019 at 17:12

felixmosh

35.8k10 gold badges81 silver badges99 bronze badges

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

5 Comments

Claudiu Creanga Over a year ago

yes, it works like that, but no js files are created. I was expecting that webpack will create a bundle.js file

George Onofrei Over a year ago

"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.

Brady Holt Over a year ago

Also check for noEmitOnError not being set to true!

Brandon0050 Over a year ago

This worked for me as well when coverting a simple react app to typescript. Thank you!

kaya Over a year ago

Also emitDeclarationOnly should not be true !!!

Josef · Accepted Answer · 2021-07-07 07:41:41Z

11

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 7, 2021 at 7:41

Josef

3,6522 gold badges26 silver badges27 bronze badges

answered Jul 7, 2021 at 7:02

Soshiv Upreti

1291 silver badge7 bronze badges

2 Comments

Dolphin Over a year ago

why not use ts-loader with the ts file? @Soshiv Upreti

Soshiv Upreti Over a year ago

check this stackoverflow.com/questions/49624202/… @Dolphin

Collectives™ on Stack Overflow

Webpack with typescript getting TypeScript emitted no output error

2 Answers 2

5 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related