KPC
Kevin Powell - Community•5mo ago
ProdJuan

JS module export/import does not work

I need help getting what amounts to a straightforward module export/import to work. I followed docs/notes online for construction a rudimentary module, with the export statement at the top, then in the calling script, I reference the item within the module in the import statement and the "stupid" error appears Uncaught SyntaxError: import declarations may only appear at top level of a module Here's the jist: 
<script src="/scripts/project.js"></script>
<script src="/scripts/project.js"></script>
project.js looks like: 
/* project.js */
import { time_utils } from "./time_utils.js";

var yesterday = '2025-05-28',
date_string = time_utils.date_ymd( yesterday );
/* project.js */
import { time_utils } from "./time_utils.js";

var yesterday = '2025-05-28',
date_string = time_utils.date_ymd( yesterday );
time_utils.js looks like: 
/* time_utils.js */
export default { time_utils };

var time_utils = {
       date_ymd : function( the_date ) {
        var date_string, now = new Date( the_date );
        date_string = '' + now.getFullYear() + '-' + time_utils.pad_date( now.getMonth()+1, 2) + '-' + time_utils.pad_date( now.getDate(), 2);
        return date_string;
    }
};
/* time_utils.js */
export default { time_utils };

var time_utils = {
       date_ymd : function( the_date ) {
        var date_string, now = new Date( the_date );
        date_string = '' + now.getFullYear() + '-' + time_utils.pad_date( now.getMonth()+1, 2) + '-' + time_utils.pad_date( now.getDate(), 2);
        return date_string;
    }
};
The browser throws and error on the import line in project.js. So, what am I missing to make this work? Thanks for any/all substantive contributions! 🙏
10 Replies
13eck
13eck•5mo ago
Your script tag needs a type=“module” so the browser knows it’s a module Otherwise it’s treated as a non-module script
ProdJuan
ProdJuanOP•5mo ago
referring to the project.js needs to be be in a script tag with a type=module attribute?
13eck
13eck•5mo ago
Yes
ProdJuan
ProdJuanOP•5mo ago
added type="module" to script tag, fixed a few other errors, now the page throws "the requested module './time_utils.js' doesn't provide an export named: 'time_utils' " ... grrr 😠
13eck
13eck•5mo ago
Remove the default in the export statement Ok, explanation time: When you export default time_utils; then it's a named default export, so the import syntax is import time_utils from .... Named Default exports are not destructured as part of the import { ... } from ..., so you can't use curly braces for default imports/exports. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#default_exports_versus_named_exports
ProdJuan
ProdJuanOP•5mo ago
I appreciate the read-in because I'm just getting acquainted with this style of JS coding and it's been rough going for something that ought to be straightforward.
13eck
13eck•5mo ago
No worries. It’s one of those, “you don’t know what you don’t know” kinda things
Ganesh
Ganesh•5mo ago
Did you mean to say default exports instead of named exports here? Cause export default time_utils; is a default export and named exports are the ones that're destructured
13eck
13eck•5mo ago
Yes, you're right. Fixed
Ganesh
Ganesh•5mo ago
👍

Did you find this page helpful?