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?

If you do an `import {home} from "home.js";` you have to do an `export` in `home.js` . Base on what you show in your question you don't export `home` in `home.js`. — t.niese, Mar 09 '23 at 19:59
I add `export default {home: home}` into home.js and it still showing the error message with import and the second one with export "Unexpected token 'export' " — Krisek, Mar 09 '23 at 20:21

score 0 · Accepted Answer · answered Mar 09 '23 at 20:24

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>

Why home is not defined?

1 Answers1

Fixing it for HTML