TypeScript Uncaught SyntaxError: 在模块中未定义 ‘import_react3’ 的导出 (位于 chunk-ALR5B6M7.jsv=aa4e0109:17143:3)

在本文中，我们将介绍 TypeScript 中的模块导入和导出的用法，并解释为什么可能会出现如上所示的错误信息。我们还将通过示例说明如何正确地使用模块导入和导出，以避免这种错误。

阅读更多：TypeScript 教程

什么是模块导入和导出？

在 TypeScript 中，模块是可以复用的代码块，可以在不同文件之间进行导入和导出。模块的导入和导出可以帮助我们实现代码的模块化，使得代码更加可维护、可扩展和可复用。

在 TypeScript 中，我们可以使用 import 语句导入其他模块的内容，也可以使用 export 关键字将本模块的内容导出供其他模块使用。通过这种方式，不同的模块可以相互调用和共享代码。

为什么会出现 “Export ‘import_react3’ is not defined” 的错误？

出现 “Export ‘import_react3’ is not defined in module” 错误的原因通常有以下几种情况：

1. 错误的导出名称：导出的名称与实际代码中的名称不匹配。例如，在 export 语句中导出了一个名为 import_react3 的变量，但实际代码中并没有定义该变量。

// 错误的导出名称
export { import_react3 };

2. 错误的导入语句：导入其他模块时使用了错误的语法或名称。例如，在使用 import 语句导入模块时，模块的路径或导入的名称与实际代码中的不匹配。

// 错误的导入语句
import { import_react3 } from 'react';

3. 缺少导入或导出语句：没有正确导入或导出所需的模块或变量。例如，在实际代码中没有导入所需的模块，或没有将变量正确导出供其他模块使用。

// 缺少导入语句
import React from 'react';

// 缺少导出语句
export { import_react3 };

示例：正确使用模块导入和导出

下面是一个例子，展示了如何正确地使用模块导入和导出。假设我们有两个模块，一个是 utils.ts，另一个是 app.ts。

首先，我们在 utils.ts 中定义一个变量，并导出供其他模块使用：

// utils.ts
export const message = 'Hello, TypeScript!';

然后，在 app.ts 中导入 utils.ts 中导出的变量，并使用它：

// app.ts
import { message } from './utils';

console.log(message); // 输出：Hello, TypeScript!

在这个示例中，我们使用 import { message } from './utils' 导入了 utils.ts 中导出的 message 变量，并在控制台输出了它的值。

总结

本文介绍了 TypeScript 中的模块导入和导出的用法，并解释了遇到 “Export ‘import_react3’ is not defined” 错误的可能原因。正确使用模块导入和导出可以帮助我们实现代码的模块化，提高代码的可维护性和可复用性。在使用模块导入和导出时，务必注意导入和导出的名称要匹配，避免使用错误的导入语句，并确保正确导入或导出所需的模块或变量。希望本文对您理解和解决模块导入和导出的常见错误有所帮助。