I'm trying to define a class in a separate javascript file and then use that class in my HTML file.

Here's what I'm trying.

1. I create the class VoiceCard in the VoiceCard.js file:

```
class VoiceCard {
    constructor(nickname, date_time, post_title, voice_post) {
        this.nickname = nickname;
        this.date_time = date_time;
        this.post_title = post_title;
        this.voice_post = voice_post;
    }

```

2. I create an HTML file where I add the file as the source:

```
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example</title>
    <meta charset="utf-8">
    <script type="module" src="../VoiceCard.js"></script>
</head>

```

3. I create a script where I call the class to create a new variable of the VoiceCard class and log one of the attributes to the console:

```
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example</title>
    <meta charset="utf-8">
    <script type="module" src="../VoiceCard.js"></script>
</head>
<body>
<script type="text/javascript">
    let v_card = new VoiceCard(
        "Lorder",
        "12:00",
        "First Voicer Post",
        "file_location.mp4");

    console.log(v_card.nickname);
</script>
</body>
</html>

```

The error is: Uncaught ReferenceError: VoiceCard is not defined.

I can't seem to find the reason for the error. Any help would be appreciated.