Am trying to implement reusable code blocks in JS. According to the documentation at ExploringJS, the following approach should work:

<script language="javascript" type="module">
   import declarePasswordEventHandlers from '/pathTo/password_event_handlers.js';
</script>
<script language="javascript">
   $( 'document' ).ready( function() { 
      declarePasswordEventHandlers(); 
   });
</script>

The imported module looks like this:

export default function declarePasswordEventHandlers() { 
   // event handlers being declared
}

When I load the page, I get the following error:

I've also tried:

<script language="javascript" type="module">
   import { declarePasswordEventHandlers } from '/pathTo/password_event_handlers.js';
</script>
<script language="javascript">
   $( 'document' ).ready( function() { 
       declarePasswordEventHandlers(); 
   });
</script>

and:

<script language="javascript" type="module">
   import * as passHandlerLib from '/pathTo/password_event_handlers.js';
</script>
<script language="javascript">
   $( 'document' ).ready( function() { 
      passHandlerLib.declarePasswordEventHandlers(); 
   });
</script>

Both used the selfsame export file as above, but with the default keyword removed from the export statement:

export function declarePasswordEventHandlers() { 
   // event handlers being declared
}

None of these approaches work; I get the same exact error shown in the attached screenshot.

What am I missing here?