Webpack 抱怨打字稿定义文件导入 - 除非我添加一个 `d.ts` 结尾

Question

I have the weirdest situation where my webpack build complains of a single instance of importing a file where it cannot find the file, unless I add a .d.ts or .d ending in the the import literal.

ERROR in ./src/screens/homeward-questionnaire-schedule/HomewardQuestionnaireScheduleScreen.tsx
Module not found: Error: Can't resolve '../../types/schedule-type-interfaces' in '/home/myuser/dev/nicecorp/nicecorp-frontend/src/screens/homeward-questionnaire-schedule'
 @ ./src/screens/homeward-questionnaire-schedule/HomewardQuestionnaireScheduleScreen.tsx 33:0-66 380:10-20 384:10-20 388:10-20 392:10-20 396:10-20 400:10-20 404:10-20 408:10-20 412:10-20 416:10-20
 @ ./src/components/one-offs/MainGuiLayout.tsx
 @ ./src/components/one-offs/AppWrapper.jsx

The file is imported in 3 files, and it is only an issue in this single file:

$ git grep schedule-type-interfaces
src/screens/homeward-questionnaire-schedule/HomewardQuestionnaireScheduleScreen.tsx:import { ButtonProp, Question, QuestionId } from '../../types/schedule-type-interfaces'
src/screens/homeward-questionnaire-schedule/QuestionSelector.tsx:import { Question } from '../../types/schedule-type-interfaces'
src/utils/questionnaire-util.ts:import { ButtonProp, Question } from '../types/schedule-type-interfaces'

Adding this single diff will make the build pass with flying colors:

$ git diff
diff --git a/nicecorp-frontend/src/screens/homeward-questionnaire-schedule/HomewardQuestionnaireScheduleScreen.tsx b/nicecorp-frontend/src/screens/homeward-questionnaire-schedule/HomewardQuestionnaireScheduleScreen.tsx
index 0a2a3e366..4d3def526 100644
--- a/nicecorp-frontend/src/screens/homeward-questionnaire-schedule/HomewardQuestionnaireScheduleScreen.tsx
+++ b/nicecorp-frontend/src/screens/homeward-questionnaire-schedule/HomewardQuestionnaireScheduleScreen.tsx
@@ -32,7 +32,7 @@ import { Encounter, Patient, QuestionnaireSchedule } from '../../types/domain-ty
 import { CancellationCriteriaEnum } from '../../types/enums'
 import { nicecorpError } from '../../types/other-types'
 // TODO: find out why we need the extension for webpack not to fail
+import { ButtonProp, Question, QuestionId } from '../../types/schedule-type-interfaces.d'
-import { ButtonProp, Question, QuestionId } from '../../types/schedule-type-interfaces'
 import { connectWithDataLoader } from '../../utils/composer'
 import {
   dayNameMap,

This makes no sense to any of us, so I am reaching out in hope of becoming smarter. So it can find the file no problem if skipping the *.ts ending, but I have to specify *.d.ts for it to not fail. So weird. This is the directory in which the file lives - no name clashes:

$ ls -1 src/types/
base-type-interfaces.d.ts
base-types.js
completable-types.js
domain-type-interfaces.d.ts
domain-types.js
dom-types.js
enums.js
other-type-interfaces.d.ts
other-types.js
questions-types.js
react-specific-types.js
README.md
schedule-type-interfaces.d.ts

Answer 1

*.d.ts files are supposed to add typings for existing javascript code. We simply used them for creating interfaces, for some weird historical reasons, and people forgot why in the process, creating new ones.

Renaming these files to *.ts was what fixed the issue.