13 replies

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

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

import

line in project.js.
So, what am I missing to make this work? Thanks for any/all substantive contributions!

KP-C

Kevin Powell - Community•10mo ago•

13 replies

ProdJuan

JS module export/import does not work

Uncaught SyntaxError: import declarations may only appear at top level of a module

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

import

line in project.js.
So, what am I missing to make this work? Thanks for any/all substantive contributions!

JS module export/import does not work

Similar Threads

JS module export/import does not work

Similar Threads

Similar Threads

Similar Threads