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?

Can you link the tutorial? Also, try setting the compilerOptions.moduleResolution = "node" in tsconfig, and retry the step where it wasn't finding ./components — Granga
– Granga, Commented Jul 6, 2016 at 19:43
Sorry, forgot the link - updated question. I tried adding "moduleResolution":"node" to tsconfig, but nothing changed, both with d.ts added to extensions and not. — zeroin
– zeroin, Commented Jul 6, 2016 at 19:52

N. Kudryavtsev · Accepted Answer · 2019-07-23 13:54:15Z

26

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, e. g. 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

edited Jul 23, 2019 at 13:54

answered Apr 30, 2018 at 12:10

N. Kudryavtsev

4,1091 gold badge31 silver badges35 bronze badges

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

2 Comments

Zomono Over a year ago

This solved the issue for me as well. Thanks. However, the ts-loader should handle this for itself. It does not make sense, that one has to explicitly send d.ts file to dev null.

Lucio Paiva Over a year ago

Minor contribution: exclude: ["/node_modules/", /\.d\.ts$/iu] as an array also works and is slightly better to read.

basarat · Accepted Answer · 2021-10-27 20:38:43Z

6

index.d.ts

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

Fix

Make sure that the .d.ts file is not a part of the required emit by excluding it from webpack e.g. by redirecting it to ignore-loader

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

edited Oct 27, 2021 at 20:38

answered Jul 7, 2016 at 0:28

basarat

278k60 gold badges475 silver badges528 bronze badges

4 Comments

zeroin Over a year ago

This works fine, except that now, if I import it like: import * as MyLib from "./components"; it shows: Module not found: Error: Cannot resolve directory './components'. Only if I import it like import {MyClass} from "./components" it works fine. Is there a way to solve this?

zeroin Over a year ago

I asked another question regarding this other error: stackoverflow.com/questions/38251505/…

RWDJ Over a year ago

Please explain more. As-is, N. Kudryavtsev's answer was more helpful, although feeling a little like circumventing the problem. I checked your resource with no clarity, and this says .d.ts are by default included, so I don't know what you mean by adding it to "compilation context".

Chris Over a year ago

Came across this answer and it's not really clear. Any elaboration?

Pete Hayman · Accepted Answer · 2022-03-02 12:46:23Z

1

Declaration files should be imported using the type keyword.

import type * as MyLib from "./components"

answered Mar 2, 2022 at 12:46

Pete Hayman

6,1152 gold badges44 silver badges49 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

Fix

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Fix

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related