Resolved: Why home is not defined?

In this post, we will see how to resolve Why home is not defined?

Question:

I am not sure why home is not defined when i do this in app.js? I tried to reference home.js with app.js by adding code

import {home} from "home.js";

into app.js but then i got an error that said “Cannot use import statement outside a module”
Is that reference enough and should i focus my self to solve the second one error?
Index.html

<!DOCTYPE html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>

<body>

    <div id="app" class="container">
        <h3 class="d-flex justify-content-center">
            FrontEnd Test
        </h3>
        <h5 class="d-flex justify-content-center">
            Employee Portal
        </h5>

        <nav class="navbar navbar-expand-sm bg-light navbar-dark">
            <ul class="navbar-nav">
                <li class="nav-item m-1">
                    <router-link class="btn btn-light btn-outline-primary"
                    to="/home">Home</router-link>
                </li>
                <li class="nav-item m-1">
                    <router-link class="btn btn-light btn-outline-primary"
                    to="/department">Department</router-link>
                </li>
                <li class="nav-item m-1">
                    <router-link class="btn btn-light btn-outline-primary"
                    to="/employee">Employee</router-link>
                </li>
            </ul>
        </nav>
        <router-view></router-view>
    </div>


   
    <script src="variables.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.3.4/axios.min.js"></script>
    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/vue-router@4"></script>   
    <script src="app.js"></script>
    <script src="home.js"></script>
    <script src="department.js"></script>
    <script src="employee.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
    
    
</body>
</html>

home.js

const home = { template: `<h1>This home</h1>` }

app.js

    {path:'/home',component:home},
    {path:'/employee',component:employee},
    {path:'/department',component:department}
]

const router = new VueRouter({
    routes
})

const app = new Vue({
    router
}).$mount('#app')

Suggestion why home is not defined?

Best Answer:

Please check the MDN Docs about import
From Cannot use import statement outside a module in JavaScript

In JavaScript, a module is a code executed in its own scope, separate from the global scope. Import statements can only be used within a module and not in the global scope.

Fixing it for HTML

To fix the problem for HTML scripts, you need to set the element’s type attribute to specify the type of script included in the element.
If the type attribute is set to “module”, the browser will know that the script is a JavaScript module and will execute it as such.
This will allow you to use import statements within the script.
Here is an example:

<!-- when loading raw JS -->

<script type="module"></script>

<!-- when loading external files -->

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

If you have better answer, please add a comment about this, thank you!

Source: Stackoverflow.com

Resolved: Why home is not defined?

Resolved: Kivy widget hierarchy not behaving as expected

Resolved: Pandas Groupby Get Values from Previous Group

Resolved: Can’t access static methods from outside until JavaScript’s static block is over?