imported constant or function not defined

Question

Here are the two files that I'm using for the code testing.

export.js:

export const AGE_MARGIN = 18;

export function canidrive(age) {
    if (age < AGE_MARGIN) {
        return("You cannot drive since you're " + age + " which is lesser than " + AGE_MARGIN);
    }
    else {
        return("You can drive since you're " + age + " which is greater than or equal to " + AGE_MARGIN)
    }
}

import.html:

<button onclick="alert(canidrive(17))">Can i drive?</button>
<script type="module">
    import {canidrive, AGE_MARGIN} from './export.js';
</script>

When I click the button in the html page:

1. there is no alert
2. returns error in the console saying Uncaught ReferenceError: canidrive is not defined

I'm following a tutorial and it works for them but outputs error for me so its confusing since I don't see any code errors that I have made.