‘import’ 和 ‘export’ 可能只出现在顶层

作者

‘import’ 和 ‘export’ 只能出现在顶层

‘import’ and ‘export’ may only appear at the top level

当我们在声明函数或类时忘记右大括号，或者混淆了默认和命名的导出和导入时，就会出现错误“导入和导出可能只出现在顶层”。

要解决该错误，请确保您没有忘记函数定义中的右大括号。

import 和 export 可能只出现在顶层

下面是错误如何发生的示例。

应用程序.js
const App = () => {
  return (
    <div>
      <h1>Hello world</h1>
    </div>
  );
   // 👈️ missing curly brace here

// ⛔️ SyntaxError: 'import' and 'export' may only appear at the top level. (11:0)
export default App;

App我们在导致错误的函数定义中缺少花括号。

这也可能是缺少括号，因此请确保您定义的函数和类在语法上是正确的。

一旦我们添加了右花括号，错误就解决了。

应用程序.js
const App = () => {
  return (
    <div>
      <h1>Hello world</h1>
    </div>
  );
};

export default App;

不要混淆默认和命名的导出和导入

错误的另一个常见原因是混淆了默认和命名的导出和导入。

您可以通过以下方式将默认导入/导出与 ES6 模块一起使用：

索引.js
// 👇️ default export
export default function sum(a, b) {
  return a + b;
}

并在另一个文件中导入函数。

另一个文件.js
// 👇️ default import
import sum from './index.js';

console.log(sum(10, 15));

请注意，我们在使用默认导入时不使用花括号。

每个文件只能有 1 个默认导出。

以下是您如何使用命名导入/导出。

索引.js
// 👇️ named export
export function sum(a, b) {
  return a + b;
}

现在我们在另一个文件中使用命名导入。

另一个文件.js
// 👇️ named import
import {sum} from './index.js';

console.log(sum(10, 15));

注意花括号，这是我们导入命名导出的方式。

您必须与您的进出口保持一致。导入默认导出时不要使用花括号，导入命名导出时使用花括号。

您也可以混合搭配，这里是一个例子。

索引.js
// 👇️ named export
export const num = 100;

// 👇️ default export
export default function sum(a, b) {
  return a + b;
}

这是进口商品。

另一个文件.js
// 👇️ default and named imports
import sum, {num} from './index.js';

console.log(sum(10, 15)); // 👉️ 25
console.log(num); // 👉️ 100

我们使用默认导入来导入sum函数，使用命名导入来导入num变量。