如何在 React 中解决这个加载程序问题？

Question

我想使用GitHub的这个弹出组件

我使用 npm 安装了它（否则我不知道该怎么做）。 我将它导入到我的 App.js

import { Root, Popup } from 'popup-ui'

导入后，我收到以下消息：

找不到模块“popup-ui”的声明文件。

'c:/Repos/Budgeteer/node_modules/popup-ui/index.js' 隐含一个 'any' 类型。

尝试npm install @types/popup-ui（如果存在）或添加一个包含`declare module'popup-ui'的新声明（.d.ts）文件；

`ts(7016)

@types/popup-ui 不存在。我不知道声明是什么意思（这里是菜鸟）。我查了一下 ts(7016)，作为一个初学者，我又不知道该怎么做。

编译时出现这个问题：

C:/Repos/Budgeteer/node_modules/popup-ui/src/basic/Popup/index.js 10:1

模块解析失败：意外令牌 (10:1)

您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。

见https://webpack.js.org/concepts#loaders

这段代码出现了错误：

|   static popupInstance
| 
>   static show({ ...config }) {"
|       this.popupInstance.start(config)
|   }

我查看了链接并阅读了加载程序，但我不知道我需要安装什么类型的加载程序，如何安装它或如何编辑该 webpack 文件。我什至找不到它。

任何帮助将不胜感激。但请尽量详细，因为我对这一切都是新手。

另外，如果这很重要，我会在 Expo 中使用 React Native。 干杯。

Answer 1

如果 webpack 正在运行 tsc（Typescript 编译器）并且它在抱怨 .d.ts，这很奇怪。如果 Webpack 说“我没有为 .d.ts 文件定义加载程序”，这意味着某些事情正在尝试require .d.ts，这永远不会发生。

当人们通过require.context(/too-many-files.*\.ts/) 或require("/some/path/" + fileName) 定义了广泛的上下文时，我遇到了这个问题。 Webpack 会尝试静态分析后面的语句，并将（或多或少）视为require.context(/\/some\/path\/.*/)

无论哪种方式，您最终都会在不应该的情况下抓取.d.ts 文件。如果您可以修复 require / require.context 使其排除打字，请执行此操作。如果不能，添加类似{test: /\.d\.ts$/, use: "null-loader"}的规则