Javascript 模块导入和导出不起作用（未找到导入绑定名称。）

Question

我已经在SO和网络上寻找答案，但到目前为止没有发现任何有帮助的东西。当导航到我的测试站点（见下文）时，我收到此错误：

Importing binding name 'Person' is not found.

来自index.html：

<script type="module" src="js/person.js"></script>
<script type="module" src="js/script.js"></script>

来自 script.js：

import {Person} from '/js/person.js';

来自 person.js：

export class Person {
  constructor(
    firstName, lastName, email
  ){
    this.firstName = firstName;
    this.lastName = lastName;
    this.email = email;
  }

  setFirstName(firstName){
    this.firstName = firstName;
  }

  setLastName(lastName){
    this.lastName = lastName;
  }

  setEmail(email){
    this.email = email;
  }

}

我找到的所有文档似乎都表明我做得正确，但我收到了错误。大家有什么想法吗？

更新 在 Windows 下一切正常，但在 Safari、Firefox 或 Chrome 中使用 MacOS 12 则不行。为什么？

Answer 1

问题已解决；我在 MacOS 上的 VS Code 中使用“Live Server”插件来为该站点提供服务，这显然导致了问题（尽管在 Windows 下，它工作得很好）。当在 MacOS 上使用 Apache 提供服务时，它可以工作。

Answer 2

导致此错误消息的原因（尽管不是OP的情况）是，当从具有

default

导出的模块导入时，使用

import {defaultName, otherName} from ...

而不是

import defaultName, {otherName} form ...