ts-loader: Unable to import .d.ts files

Why can’t ts-loader find my .d.ts files? When I build with webpack, I get:

ERROR in ./src/filter.ts
Module not found: Error: Can't resolve './png' in '/Users/bronson/testproj/src'
 @ ./src/filter.ts 1:0-15
 @ ./src/content.ts

But, when I call tsc directly, it loads png.d.ts and compiles the project just fine. tslint works too. The problem appears to only affect ts-loader (and atl).

Here is filter.ts, the error occurs on the first line, import './png':

import './png'
import * as logo from './icon-blue.png'

And here’s png.d.ts, not much to it:

declare module '*.png' {
  const value: any
  export = value
}

Interestingly, if I replace the es6 import with a reference, it works. ts-loader builds this without error:

///<reference path="png.d.ts"/>
import * as logo from './icon-blue.png'

And, for reference, an example of calling tsc directly:

tsc --module es6 --target es6 --moduleResolution node --allowSyntheticDefaultImports --noImplicitReturns --strict --outDir /tmp --traceResolution src/filter.ts

======== Resolving module './png' from '/Users/bronson/testproj/src/filter.ts'. ========
Explicitly specified module resolution kind: 'NodeJs'.
Loading module as file / folder, candidate module location '/Users/bronson/testproj/src/png', target file type 'TypeScript'.
File '/Users/bronson/testproj/src/png.ts' does not exist.
File '/Users/bronson/testproj/src/png.tsx' does not exist.
File '/Users/bronson/testproj/src/png.d.ts' exist - use it as a name resolution result.
======== Module name './png' was successfully resolved to '/Users/bronson/testproj/src/png.d.ts'. ========

How can I debug this further? Is there a way to get ts-loader to tell me how it’s resolving modules, similar to --moduleResolution? Thanks!

ts-loader version: 2.3.7
TypeScript version: 2.5.2

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 19
Comments: 36 (6 by maintainers)

Most upvoted comments

Just adding a final note for the public record.

.d.ts files aren’t bundled because TypeScript doesn’t output any JS (because they only contain types which don’t exist in JS). And (I guess?) empty files have no need to be bundled. Then later when your code tries to import that file it doesn’t exist.

To fix, ensure you always use import type whenever you import a .d.ts file. The import type won’t exist in the generated code, so a file that doesn’t exist won’t be imported.

The only weakness is that import/export type don’t support * wildcard syntax. But it’s not a huge issue.

+16

dhoulb on May 11, 2020

Finally, I use awesome-typescript-loader to solve this problem…

nonoroazoro on Jul 3, 2018

I imagine the import type syntax from TypeScript 3.8 should make this a non-issue. Just use import type whenever you import a .d.ts file and it should work without error.

dhoulb on Feb 12, 2020

I am also facing the same issue.

I have a async-child-process module and I am using import { join, Result } from "async-child-process";

I have created a typings folder and has an async-child-process.d.ts file in it. tsc -p ./ works fine however when I use webpack with ts-loader, I get the error: error TS7016: Could not find a declaration file for module ‘async-child-process’.

Did anyone find a fix for this ?

akshita31 on Feb 8, 2019

@johnnyreilly He’s not trying to import a .png file here, he’s trying to import a file called png.d.ts.

I’m having the same issue trying to import global.d.ts:

import "./global";

results in this output (even though tsc has no issue):

Module not found: Error: Can't resolve './global' in 'C:\...'

However using a triple-slash reference seems to work. Is that the expected way to include .d.ts files?

///<reference path="./global.d.ts"/>

aj-r on Apr 20, 2018

@johnnyreilly 😭 Sorry I made a mistake, it seems that the ATL didn’t solve the problem…

But after I separated the declaration files into a new types folder (rather than put them in the same dist folder), the warning is gone, and I’m using ts-loader again 😄

nonoroazoro on Jul 3, 2018

OK, Webpack can’t load png.d.ts because of my extensions: https://github.com/bronson/ts-loader-test/blob/master/webpack.config.js#L7

When I added .d.ts to that list, webpack finds png.d.ts. Good! But now ts-loader complains:

ERROR in ./png.d.ts
Module build failed: Error: Typescript emitted no output for /Users/bronson/tester/png.d.ts.
    at successLoader (/Users/bronson/tester/node_modules/ts-loader/dist/index.js:48:15)
    at Object.loader (/Users/bronson/tester/node_modules/ts-loader/dist/index.js:30:12)
 @ ./content.ts 1:0-15

And now I’m confused… It’s true that declaration files don’t produce any output. So how are they supposed to work with ts-loader?

This is for a different problem, isn’t it? https://github.com/TypeStrong/ts-loader#declarations-dts

bronson on Sep 23, 2017

When I use import type I get the error message “‘Elm’ cannot be used as a value because it was imported using ‘import type’.ts(1361)”. How can I solve this?

pingiun on Oct 20, 2022

I imagine the import type syntax from TypeScript 3.8 should make this a non-issue. Just use import type whenever you import a .d.ts file and it should work without error.

Worked for me… I thought I was losing my mind as well… I was so close to slamming the keyboard… Thank you so much… .Cheers Exporting export * from './my-file' Importing import type {MyType} from '@/thatfile'

victor-basurto on Jan 10, 2022

My problem was my tsconfig.json wasn’t include-ing the directory with the d.ts file in it.

cbaron on Aug 13, 2020

However using a triple-slash reference seems to work. Is that the expected way to include .d.ts files?

No. I suspect you need to explicitly include a reference to your .d.ts file in your tsconfig.json. Try that and report back

TSC and TypeScript have different behaviour when it comes to module resolution. I feel we could handle this better and I’m open to someone implementing something which results in a nicer experience. Whether that makes sense as a “now it just works” or in the form of a helpful error with suggested fix when compiling I’m not sure.

If someone wants to provide a minimal repo that illustrates this issue it would be very helpful. With that a straight fix to ts-loader might be possible for someone to attempt.

johnnyreilly on Apr 20, 2018