Javascript Importing Modules And Using Them in HTML Document

Question

The problem I have been having is that I cannot get imported modules to work together in vanilla Javascript. Here's my project structure:

> toplevel
> index.html
> main.css
> main.js
> js/
> > setup_event_listeners.js

main.js:

// only import statement
import { setupEventListenersForIndex } from "./js/setup_event_listeners";

...

setup_event_listeners.js:

// only export
export function setupEventListenersForIndex() {
    addEventListenerToLambdaButton();
    addEventListenerToSubmitButton();
}

...

index.html

<body>
    ...
    <script type="module" src="./main.js"></script>
</body>

I use the Live Server VSCode Extension to host my test server. I have left the default settings as is and have not configured the settings.

When I run the Live Server, the console logs this error:

main.js:2
GET http://127.0.0.1:5500/js/setup_event_listeners net::ERR_ABORTED 404 (Not Found)

I have attempted to move the script tag around. The CSS is loading perfectly fine so I am unsure of the problem.

jQueeny · Accepted Answer · 2023-11-21 23:10:38Z

1

Try adding the .js extension to your import:

import { setupEventListenersForIndex } from "./js/setup_event_listeners.js";

As stated in the Node docs:

A file extension must be provided when using the import keyword to resolve relative or absolute specifiers. Directory indexes (e.g. './startup/index.js') must also be fully specified. This behavior matches how import behaves in browser environments, assuming a typically configured server.

answered Nov 21, 2023 at 23:10

jQueeny

8,9453 gold badges8 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Javascript Importing Modules And Using Them in HTML Document

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related