未捕获的语法错误：请求的模块“../user_module/User.js”未提供名为“用户”的导出 main.js:1答案

【问题标题】：Uncaught SyntaxError: The requested module '../user_module/User.js' does not provide an export named 'User' main.js:1未捕获的语法错误：请求的模块“../user_module/User.js”未提供名为“用户”的导出 main.js:1
【发布时间】：2021-02-07 19:00:45
【问题描述】：

我在让一个简单的 JavaScript 模块示例工作时遇到了一些困难。对于下面的示例代码，我收到一条错误消息：

未捕获的 SyntaxError：请求的模块 '../user_module/User.js' 未提供名为 'User' main.js:1 的导出

这是我的项目目录结构：

模块测试器
├──css
├ ├──module_tester_style.css
├──测试
├ ├──main.js
├──用户模块
├ ├──User.js
├──index.html

这是我的 index.html 文件：

<head>
    <title>JS Modules</title>
    <link rel="stylesheet" type="text/css" href="./css/module_tester_style.css" />
    <script type="module" src="./test/main.js"></script>
</head>

<body>
    <h1>Module Tester</h1>

    <h3 id="user_results">Enter User Data Below</h3>

    <form>
        <label for="userName" class="user-name">User Name:</label>
        <input id="userNameTF" type="text">

        <label for="dobMonth" class="dob-month">DOB Month:</label>
        <input id="userDobMonthTF" type="text">

        <label for="dobDay" class="dob-day">DOB Day:</label>
        <input id="userDobDayTF" type="text">

        <label for="dobYear" class="dob-year">DOB Year:</label>
        <input id="userDobYearTF" type="text">

        <button onclick="getAndDisplayUserAge()">Calculate Age</button>
    </form>
</body>

</html>

这里是 main.js：

import { User, DateOfBirth } from '../user_module/User.js'

export function getAndDisplayUserAge() {
    let name = document.getElementById("userNameTF").value;
    let dobMonth = document.getElementById("userDobMonthTF").value;
    let dobDay = document.getElementById("userDobDayTF").value;
    let dobYear = document.getElementById("userDobYearTF").value;

    let user = new User(name, dobMonth, dobDay, dobYear);
    document.getElementById("user-results").value = user.toString();
    let dob = user.dob;
    console.log("User dob: " + dob);
}

这里是 User.js

export default class User {
    constructor(initName, initMonth, initDay, initYear) {
        this.name = initName;
        this.dob = new DateOfBirth(initMonth, initDay, initYear);
    }

    toString() {
        return this.name + ", born "
                + this.dob.toString()
                + " (" + this.dob.calculateAge()
                + " years old" + ")";
    }
}

export class DateOfBirth {
    constructor(initMonth, initDay, initYear) {
        this.month = initMonth;
        this.day = initDay;
        this.year = initYear;
    }

    calculateAgeInYears() {
        // GET THE DATE RIGHT NOW
        let now = new Date();
        let ageInYears = now.getFullYear() - this.year;
        if (now.getMonth() - this.month)
            ageInYears--;
        else if (((now.getMonth() - this.month) === 0)
                && (now.getDate() < this.day))
            ageInYears--;
        return ageInYears;
    }
}

【问题讨论】：

标签： javascript import module export

【解决方案1】：

您将 User 类导出为默认导出，因此您在 main.js 中的导入语句应如下所示：

import User, { DateOfBirth } from '../user_module/User.js'

【讨论】：

好消息是解决了我的错误。新问题是现在我有一个不同的错误。当我加载页面然后单击我的按钮时，它给了我一个 ReferenceError 告诉我它找不到 getAndDisplayUserAge 函数。
请注意，如果我从 index.html 文件中的脚本声明中删除“模块”声明，然后在 main.js 中注释掉用户的所有用法，它会找到该函数并执行它.但是由于某种原因，当我将它用作模块时，它找不到我的回调函数。我的假设是，由于某些语法错误，它的声明失败了，但即使我注释掉该方法并只保留在一个 console.log 中，只要它使用模块，它就不会找到它。

【解决方案2】：

export default Class User 表示User 是默认导出，应不带括号导入。所以你的导入语句应该是 >> import User, { DateOfBirth } from '../user_module/User.js'

【讨论】：

好消息是解决了我的错误。新问题是现在我有一个不同的错误。当我加载页面然后单击我的按钮时，它给了我一个 ReferenceError 告诉我它找不到 getAndDisplayUserAge 函数。
请注意，如果我从 index.html 文件中的脚本声明中删除“模块”声明，然后在 main.js 中注释掉用户的所有用法，它会找到该函数并执行它.但是由于某种原因，当我将它用作模块时，它找不到我的回调函数。我的假设是，由于某些语法错误，它的声明失败了，但即使我注释掉该方法并只保留在一个 console.log 中，只要它使用模块，它就不会找到它。
嘿 @the_mg ，所以我一直在尝试解决这个问题，但我在 javascript.info Modules work only via HTTP(s), not in local files If you try to open a web-page locally, via file:// protocol, you’ll find that import/export directives don’t work. Use a local web-server, such as static-server or use the “live server” capability of your editor, such as VS Code Live Server Extension to test modules. 上遇到了这个问题，在这里找到完整的参考 >> javascript.info/modules-intro