Create react app typescript does not load d.ts file

Question

I have created a project using create react app typescript. I have a few d.ts files where I have defined interfaces types and enums. When I run start script. It is not able to load the d.ts files.

following is my tsconfig file.

{
  "compilerOptions": {
    "target": "es6",
    "lib": [
      "dom",
      "dom.iterable",
      "es2017"
    ],
    "allowJs": true,
    "skipLibCheck": false,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",
    "pretty": true,
    "preserveConstEnums": true,
    "typeRoots": [
      "./node_modules/@types",
      "src/*"
    ]
  },
  "include": [
    "src/*"
  ]
}

typeRoot points to src/* , where i have my d.ts files but none of the d.ts is loaded. and I get following error:

Type error: Cannot find name 'IAlarmsDetails'. TS2304

interface IAlarmProps {
        alarm: IAlarmsDetails;
}

This is the declaration for IAlarmsDetails in one of Alarm.d.ts

declare type IAlarmsList = IAlarmsDetails[];

Please let me know what I'm missing here. I do not want to use eject option and write my own build config.

Can you show how you are defining IAlarmsDetails?

Matthias
– Matthias

2019-05-08 06:29:37 +00:00
Commented May 8, 2019 at 6:29 — Matthias
– Matthias, Commented May 8, 2019 at 6:29

Matt Browne · Accepted Answer · 2019-05-31 17:44:18Z

54

It seems that the only way to use a .d.ts file out of the box with create-react-app (version 3.0.1) is to name it global.d.ts and put it in the src directory:

src/global.d.ts

I'm not sure why this rule isn't documented anywhere but that was the only way I was able to get it to work.

answered May 31, 2019 at 17:44

Matt Browne

12.5k5 gold badges61 silver badges80 bronze badges

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

4 Comments

Mateja Petrovic Over a year ago

I wish I could give you a bounty. As you said, It's a pity that it's not better documented. On the other hand, how did you find out about it and do you have any idea as to why this works?

Matt Browne Over a year ago

global.d.ts is a common convention used in examples in the TypeScript handbook. I was just lucky enough to discover this based on it working in one of our repos (which had a global.d.ts by coincidence) but not in another where I was trying to use a file with a different name for some declarations. Perhaps the creators of create-react-app didn't realize this was just a convention rather than where all global type declarations must go...just guessing.

Dan M. CISSOKHO Over a year ago

Worked for me today, this solution is still relevant

ZhefengJin Over a year ago

this does not work for me.

Isaiah · Accepted Answer · 2021-10-14 00:08:16Z

4

In Create React App version 4.0.3, at least, this issue can be solved by editing your app's tsconfig.json file.

Under the "includes" option, add "src/types/**/*". Keep your .d.ts definition files inside of this src/types directory.

Whether or not you include an export statement in these files, the app should compile. However, the export statement will prevent your code linter from finding the type definitions unless you also import them manually.

Solution discovered thanks to this github comment.

answered Oct 14, 2021 at 0:08

Isaiah

411 bronze badge

2 Comments

ZhefengJin Over a year ago

it does not work for me.

cheslijones Over a year ago

Worked for me. I think my initial issue was this "the export statement will prevent your code linter from finding the type definitions unless you also import them manually." Removed the export and it works fine.

Free Palestine · Accepted Answer · 2022-09-10 00:57:45Z

2

I had the same issue and the way that I resolved it was by renaming the .d.ts file to index.d.ts inside the same folder and then it was working without any exports inside the index.d.ts or imports.

edited Sep 10, 2022 at 0:57

answered Jan 17, 2022 at 12:00

Free Palestine

1,0021 gold badge12 silver badges18 bronze badges

Collectives™ on Stack Overflow

Create react app typescript does not load d.ts file

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related