Erreur : Uncaught TypeError: Failed to resolve module specifier

Bonsoir,

J'ai un message d'erreur " Uncaught TypeError: Failed to resolve module specifier "tls". Relative references must start with either "/", "./", or "../". " et je ne vois pas ou est mon erreur pouvez vous m'aider ?

index.html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Electronic Store</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
        integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
 
    <script src="https://kit.fontawesome.com/236c56896e.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="./style.css" </head>
 
<body>
 
    <div class="container text-center">
        <h1 class="bg-light py-4 text-info"><i class="fas fa-plug"></i> Electronic Store</h1>
    </div>
 
    <div class="d-flex justify-content-center">
        <form class="w-50">
            <input type="text" id="userid" class="form-control" readonly placeholder="ID" autocomplete="off">
            <input type="text" id="proname" class="form-control" placeholder="Product Name" autocomplete="off">
            <div class="row">
                <div class="col">
                    <input type="text" id="seller" class="form-control m-0" placeholder="Seller" autocomplete="off">
                </div>
                <div class="col">
                    <input type="price" id="userid" class="form-control m-0" placeholder="Price" autocomplete="off">
                </div>
            </div>
        </form>
    </div>
 
    <!--Create, updtate, read and delete button-->
    <div class="d-flex justify-content-center">
        <button class="btn btn-success" id="btn-create">Create</button>
        <button class="btn btn-primary" id="btn-read">Read</button>
        <button class="btn btn-warning" id="btn-update">Update</button>
        <button class="btn btn-danger" id="btn-delete">Delete All</button>
    </div>
 
    <div class="container d-flex">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th scope="col">ID</th>
                    <th scope="col">Product Name</th>
                    <th scope="col">Seller</th>
                    <th scope="col">Price</th>
                    <th scope="col">Edit</th>
                    <th scope="col">Delete</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                    <td><i class="fas fa-edit btnedit"></i></td>
                    <td><i class="fas fa-trash-alt btndelete"></i></td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td>
                    <td><i class="fas fa-edit btnedit"></i></td>
                    <td><i class="fas fa-trash-alt btndelete"></i></td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Larry</td>
                    <td>the Bird</td>
                    <td>@twitter</td>
                    <td><i class="fas fa-edit btnedit"></i></td>
                    <td><i class="fas fa-trash-alt btndelete"></i></td>
                </tr>
            </tbody>
        </table>
    </div>
 
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
        integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
        integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
        crossorigin="anonymous"></script>
 
    <!--Dexie API-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dexie/3.0.2/dexie.js"
        integrity="sha512-VqLA5kPYxKf7V5iz6e7QWrSfIF0RHo7xSVXTRiTOM/ZgXAraa20or7+OMQmfJATHn2okUnMOp9YcXEZVFH+t9Q=="
        crossorigin="anonymous"></script>
 
    <!--Custom Javascript main.js-->
    <script src="./js/main.js" type="module"></script>
</body>
 
</html>

main.js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import productdb, {
    bulkcreate
} from './Module.js';
 
let db = productdb("Productdb", {
    products: `++id, name, seller, price`
});
 
// input tags
const userid = document.getElementById("userid");
const proname = document.getElementById("proname");
const seller = document.getElementById("seller");
const price = document.getElementById("price");
 
//buttons
const btncreate = document.getElementById("btn-create");
const btnread = document.getElementById("btn-read");
const btnupdate = document.getElementById("btn-update");
const btndelete = document.getElementById("btn-delete");
 
 
//insert value create button
btncreate.onclick = (event) => {
    let flag = bulkcreate(db.products, {
        name: proname.value,
        seller: seller.value,
        price: price.value
    })
    console.log(flag);
}

Modules.js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// check textbox function
const empty = object => {
    let flag = false;
 
    for (const value in object) {
        if (object[value] != "" && object.hasOwnProperty(value)) {
            flag = true;
        } else {
            flag = false;
        }
    }
    return flag;
}
 
export default productdb;
export {
    bulkcreate
}