How to Download filesaver

Question

I am trying to use filesaver.js to create a file and write in it user info. But, I have a kind of silly problem. I am unable to install filesave.js in vscode. I have used the three following commands: npm install file-saver --save, bower install file-saver and npm install @types/file-saver --save-dev which all didn't work.

There is a red line under import

The error message says:

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

Here is the 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");
}

And here is the overall result with HTML CSS and JS:

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");
}

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;
}

<!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>

Answer 1

I got it ! For anyone wondering the problem was that I had the put the import before declaring the function at the top of the page.