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

编程问答 2022-08-11

问题描述

我遇到的最奇怪的情况是，我的Webpack构建抱怨单个实例导入文件，但找不到该文件，除非我添加.d.ts或.d以导入文字结尾。

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

该文件被导入为3个文件，并且在此单个文件中只是一个问题：

$ 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'

添加此单个diff将使构建过程具有飞色：

$ 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,QuestionId } from '../../types/schedule-type-interfaces.d'
-import { ButtonProp,QuestionId } from '../../types/schedule-type-interfaces'
 import { connectWithDataLoader } from '../../utils/composer'
 import {
   dayNameMap,

这对我们任何人都没有意义，所以我正在伸出援助之手，希望变得更加聪明。因此，如果跳过*.ts结尾，它可以毫无问题地找到文件，但是我必须指定*.d.ts才能使它不会失败。太奇怪了。这是文件所在的目录-没有名称冲突：

$ 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

解决方法

*.d.ts文件应该为现有的javascript代码添加类型。出于某些奇怪的历史原因，我们只是使用它们来创建界面，而人们却忘记了为什么在创建新界面的过程。

将这些文件重命名为*.ts是解决问题的原因。

javascripttypescripttypescriptwebpackwebpackwebpack