Typescript+webpack: typescript emmited no output for index.d.ts

Question

I followed this tutorial to setup typescript+webpack (no react) with success. It all works great until I add index.d.ts file my components folder, which I use to export all my modules, like:

export * from "./MyClass1";
export * from "./MyClass2";
export * from "./MyClass2";

Then I import it:

import * as MyLib from "./components";

Code hinting and everything works fine in sublime editor.

Initially, when I run it, I've got:

Cannot resolve 'file' or 'directory'./components

So I added d.ts to extensions in webpack.config.js:

 resolve: {
        extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js", ".d.ts"]
    },

Now, when I run webpack, I get this error:

Typescript emitted no output for [...]\index.d.ts

How should I solve this problem?

Answer 1

In this particular question the content of index.d.ts was not a definition but a module and should have been moved into index.ts file. I've also ran into error "typescript emmited no output for index.d.ts" but with valid declaration files.

It seems ts-loader tries to add .d.ts files to final bundle but finds nothing to add since they contain only declarations needed for type-checking during build.

Working solution for me is not to pass .d.ts files to ts-loader but to some loader that does nothing, eg ignore-loader . Corresponding rules in my webpack.config.js are:

{
    test: /\.tsx?$/,
    loader: 'ts-loader',
    exclude: /node_modules|\.d\.ts$/
},
{
    test: /\.d\.ts$/,
    loader: 'ignore-loader'
},

ts-loader can be configured slightly differently if you use ES2018, where negative lookbehind for regular expressions was added:

{
    test: /(?<!\.d)\.tsx?$/,
    loader: 'ts-loader',
    exclude: /node_modules/
},
//same ignore-loader config here

Answer 2

index.d.ts

This is a declaration file . A declaration file has no javascript emit.

Fix

instead of adding .d.ts as a resolvable extension (don't do that!), add the .d.ts into the compilation context, using something like tsconfig.json

More

https://alm-tools.gitbooks.io/alm/content/config/tsconfig.html

Answer 3

Declaration files should be imported using the type keyword.

import type * as MyLib from "./components"