Typescript, index.d.ts and webpack: Module not found error

Question

I created Typescript project with webpack, following this tutorial. As I have a lot of modules, I added index.d.ts to my src/components folder where I export all my modules:

export {Module1} from "./Module1";
export {Module2} from "./Module2";
export {Module3} from "./Module3";

I added index.d.ts to tsconfig.json files:

"files": [
    "./src/components/index.d.ts"
]

Then, in index.tsx, which is in src folder, I import:

import * as MyModule from "./components/";

Code hinting works fine, so I suppose all paths are OK. However when I run webpack, I get this error:

Module not found: Error: Cannot resolve directory './components'

As I understand, webpack doesn't find this index.d.ts file. I tried adding d.ts to webpack.config.js extensions, like described here, but then I've got a different error message. Am I missing something?

Mike K · Accepted Answer · 2021-02-05 14:24:46Z

For me, I ended up changing it from './types' to './types.d'.

So a type import would look something like,

import {
    TSomeType,
    ISomeInterface,
    ESomeEnum
} from 'src/types/components/SomeComponent/types.d'

instead of,

import {
    TSomeType,
    ISomeInterface,
    ESomeEnum
} from 'src/types/components/SomeComponent/types'

Taken from this comment:

I can confirm this issue, @Draccoz @filipesilva .

It does not happen when you change the filename from .d.ts to .ts. It also does not happen when you change your import from import { Something } from 'yourlib'; to import { Something } from 'yourlib.d';

I just moved a working project from a webpack-starter seed (TypeScript/Angular) to CLI and got this error, so I assume it has something to do with the generated CLI project.

I'm using @angular/cli: 1.0.0-rc.2

I think that it's also worth to note that tsx files work just fine. I had to change types to types.d only for ts files.

sadeq shahmoradi · Accepted Answer · 2023-08-30 18:56:08Z

4

Found a very simple solution that works like a charm:

Just add type after import.

import type { ISomeInterface } from 'src/types/components/SomeComponent/types'

edited Aug 30, 2023 at 18:56

sadeq shahmoradi

2,4631 gold badge15 silver badges31 bronze badges

answered Aug 28, 2023 at 8:35

M Salman Ghazi

791 silver badge5 bronze badges

1 Comment

Xriuk Over a year ago

This was the only solution that worked for me, I had previously used the same module with just "import" and it worked just fine, but now it apparently requires "import type"

zeroin · Accepted Answer · 2016-07-10 06:41:46Z

3

Came up with a solution to use index.ts for all exports instead of index.d.ts.

answered Jul 10, 2016 at 6:41

zeroin

6,0357 gold badges34 silver badges43 bronze badges

Collectives™ on Stack Overflow

Typescript, index.d.ts and webpack: Module not found error

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related