为啥 React 不使用接口编译我的本地模块？

Posted 2023-03-13

【中文标题】为啥 React 不使用接口编译我的本地模块？

【英文标题】：Why does React not compile my local module with an Interface?为什么 React 不使用接口编译我的本地模块？

【发布时间】：2022-01-21 14:52:57

【问题描述】：

我有一个共享模块，供 React 和后端模块使用。它包含两个文件：index.ts 和 package.json。

包.json

  "name": "app-shared",
  "version": "1.0.0",
  "license": "ISC"

在index.ts 中只有如下的导出接口：

export interface Student extends StudentDto 
    ref: any;
    id: string;
    areAllPaid: boolean;

我已将它安装在我的 React 应用程序中，并且可以导入界面。但是当我运行 React 应用程序时，会出现以下编译错误：

Failed to compile.

../shared/index.ts 4:7
Module parse failed: Unexpected token (4:7)
File was processed with these loaders:
 * ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
You may need an additional loader to handle the result of these loaders.
| $RefreshSetup$(module.id);
| 
> export interface Student extends StudentDto 
|     ref: any;
|     id: string;

这个问题与 webpack 有关，但在我的 Git 存储库中没有 webpack 配置文件。我也在其他模块中使用这个共享模块，它工作正常。

我认为共享模块需要更多代码才能与 Webpack 和 React 一起使用。我错过了什么？

【参考方案1】：

文件名必须是index.d.ts