如何解决file-saver安装失败及import语句模块报错问题

我尝试用file-saver.js创建文件并写入用户信息，在VSCode里碰到两个问题：

1. 无法成功安装file-saver.js，先后执行npm install file-saver --save、bower install file-saver、npm install @types/file-saver --save-dev三个命令均无效；
2. 代码中的import语句下方出现红线，报错信息为：

Error {
  "message": "Uncaught SyntaxError: Cannot use import statement outside a module",
  "filename": "https://stacksnippets.net/js",
  "lineno": 140,
  "colno": 5
}

相关JavaScript代码 #

function showNotification() {
    import { saveAs } from 'file-saver/FiimportleSaver';

    const notification = document.getElementById('sign-up-notification-div');
    const firstName = document.getElementById('firstNameText').value;
    const emailAddress = document.getElementById('email-name-box').value;
    const emailPassword = document.getElementById('password-name-box').value;
    const encryptedPassword = emailPassword.replace(emailPassword, 'Hidden/NaN');
    notification.innerHTML = 'Hello ' + firstName + ' you have successfully signed up ,' + "<br />" + "your prosonnal info," + "<br />" + "and email("+ emailAddress +")'s password: " + "<br />" + encryptedPassword;
    notification.style = 'opacity: 1;';

    let user_info = {
        user : {
            user_name : firstName,
            user_password: encryptedPassword
        }
    }

    var userInfo = "name: " + emailAddress + "<br />" + "email: " + emailAddress + "<br />" + "password: " + emailPassword

    var blob = new Blob([userInfo],
                { type: "text/plain;charset=utf-8" });
    saveAs(blob, "static.txt");
}

完整HTML代码 #

<!Doctype html>
<html>
    <head>
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
        <title>Sign In Page</title>
        <link rel="stylesheet" href="C:\Users\emile\Desktop\All Languages Scripts\style.css">
    </head>
    <body>
        <main>
            <article class="sign-in-box">
                <h1>Sign Up</h1>
                    <label class="first-name-text">First Name</label>
                    <label class="last-name-text">Last Name</label></br>
                    <input type="name" id="firstNameText" class="first-name-text-box">
                    <input type="name" class="last-name-text-box">
                <div class="email-div">
                    <label class="email-name-text">Enter Email</label></br>
                    <input type="email" class="email-name-box" id="email-name-box">
                </div>
                <div class="password-div">
                    <label class="password-name-text">Enter Password</label></br>
                    <input type="password" class="password-name-box" id="password-name-box">
                </div>
                <button class="sign-up-button" onclick="showNotification()">Sign Up</button>
            </article>
            <div class="sign-up-notification-div" id="sign-up-notification-div">
                <p class="sign-up-notification-text"></p>
            </div>
        </main>
        <script src="script.js"></script>
    </body>
</html>

完整CSS代码 #

body {
    background-color: rgb(137,  144, 236);
    display: flex;
    justify-content: center;
    position: relative;
    font-family: Roboto, Arial;
}
h1 {
    font-size: 35px;
}
input:focus {
    outline: none;
}
input {
    font-size: 14px;
    font-weight: bold;
}
.sign-in-box {
    background-color: rgb(39, 38, 57);
    color: white;
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 10px;
    padding-bottom: 30px;
    border-radius: 15px;
    margin-top: 100px;
    width: 360px;
}
.first-name-text,
.last-name-text,
.email-name-text,
.password-name-text {
    font-size: 16px;
    font-family: Roboto, Arial;
    font-weight: bold;
    font-style: italic;
    margin-left: 115px;
    display: inline-block;
    margin-bottom: 6px;
}
.first-name-text,
.email-name-text,
.password-name-text {
    margin-left: 6px;
}
.first-name-text-box,
.last-name-text-box {
    height: 30px;
    width: 150px;
    border-radius: 12px;
    border: none;
}
.last-name-text-box {
    margin-left: 43px;
}
.email-name-text,
.password-name-text {
    margin-top: 10px;
}
.email-name-box,
.password-name-box {
    height: 30px;
    width: 200px;
    border: none;
    border-radius: 12px;
}
.sign-up-button {
    margin-top: 25px;
    background-color: rgb(21, 21, 255);
    color: white;
    font-family: Roboto, Arial;
    font-weight: bold;    
    font-size: 17px;
    border: none;
    border-radius: 10px; 
    padding: 10px 15px; 
    cursor: pointer;         
}
.sign-up-button:hover {
    opacity: 0.8;
}
.sign-up-button:active {
    opacity: 0.6;
}
.sign-up-notification-div {
    position: absolute;
    bottom: -200px;
    right: 10px;
    background-color: rgb(234, 234, 234);
    padding: 10px 18px;
    border-radius: 10px;
    opacity: 0;
    color: black;
    font-weight: bolder;
}

一、解决file-saver安装失败问题 #

1. 排查基础环境 #

• 确认当前目录已初始化npm项目：执行npm init -y生成package.json后，再重新安装；
• 清理npm缓存：执行npm cache clean --force，然后运行npm install file-saver --save；
• 切换npm源：如果网络问题导致安装失败，用国内源尝试：npm install file-saver --save --registry=https://registry.npmmirror.com。

2. 替代方案：直接用CDN引入 #

如果npm安装始终失败，跳过安装步骤，直接在HTML中引入file-saver的CDN脚本，无需依赖本地安装：

<script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.5/dist/FileSaver.min.js"></script>

二、解决import语句报错问题 #

错误原因 #

1. import语句嵌套在函数内部：ES模块的import必须放在文件最顶部，不能在函数或代码块内；
2. 导入路径笔误：'file-saver/FiimportleSaver'应为'file-saver'；
3. 脚本未标记为ES模块：浏览器默认将普通脚本视为非模块，不支持import语法。

修复步骤 #

方式一：用CDN引入（推荐纯前端项目）

删除JS代码中的import语句，全局saveAs方法可直接使用，同时修正代码中的小问题：

function showNotification() {
    const notification = document.getElementById('sign-up-notification-div');
    const firstName = document.getElementById('firstNameText').value;
    const emailAddress = document.getElementById('email-name-box').value;
    const emailPassword = document.getElementById('password-name-box').value;
    const encryptedPassword = emailPassword.replace(emailPassword, 'Hidden/NaN');
    // 修正拼写错误：prosonnal → personal
    notification.innerHTML = 'Hello ' + firstName + ' you have successfully signed up ,' + "<br />" + "your personal info," + "<br />" + "and email("+ emailAddress +")'s password: " + "<br />" + encryptedPassword;
    // 避免覆盖所有样式，单独设置opacity
    notification.style.opacity = '1';

    let user_info = {
        user : {
            user_name : firstName,
            user_password: encryptedPassword
        }
    }

    // 文本文件用\n换行，而非<br />
    var userInfo = "name: " + firstName + "\nemail: " + emailAddress + "\npassword: " + emailPassword

    var blob = new Blob([userInfo], { type: "text/plain;charset=utf-8" });
    saveAs(blob, "user_info.txt");
}

在HTML的<body>末尾添加CDN脚本：

<script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.5/dist/FileSaver.min.js"></script>
<script src="script.js"></script>

方式二：标记脚本为ES模块（适合npm项目）

1. 修改HTML中的脚本标签，添加type="module"：

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

2. 将import移到JS文件顶部，修正路径：

import { saveAs } from 'file-saver';

function showNotification() {
    // 函数内容同上述修正后的代码
}

3. 确保已成功安装file-saver，package.json中存在对应的依赖项。

内容的提问来源于stack exchange，提问作者Emlf9