Javascript module not working in browser?

Question

Alright, I have looked on this site and have found several different answers, none of which have worked for me. Basically had a js file that had many functions in it along with the main code for the app. I wanted to move all my functions to another js file so that I could clean up my code a little. I am fairly new to js but I know in python it was as simple as saying "import (module) as (nickname) from (path)"

anyways let's say I have a function named show message in my functions.js module.

export function show_message(){
    alert("Hello");
}

and then I at the top of my main.js file I did

import { show_message } from './functions.js'
//I have also tried to import like this:
import * as func from './functions.js'

//And then I call it
show_message();
//I have also tried
func.show_message();

I know this is something simple, but as I said everywhere I have looked I have seen different answers, none of which work for me. I am using Firefox btw. I am also getting an error in the console saying that my import declarations need to be at the top of my module, I fixed that by specifying the type in my HTML link (script src="/static/main.js" type="module") The error went away but is now saying "same origin policy disallows reading the remote resource at the file (path) (reason: cors request not HTTP)."

And the other error says "module source URI is not allowed in this document".

which makes me think maybe my syntax for importing is right and the error is in my HTML code?

Any help is appreciated.

Answer 1

Consider going through this url some extension might be causing an issue with the loading of modules:

This blog might be an answer to what you're expecting.

You should first check if browser accepts type="module" and use fallback if it doesn't like this:

<script type="module" src="module.mjs"></script>
<script nomodule src="fallback.js"></script>

This might be the main reason for the CORS error as written here:

Unlike regular scripts, module scripts (and their imports) are fetched with CORS. This means cross-origin module scripts must return valid CORS headers such as Access-Control-Allow-Origin: *

So you need to add CORS header to the module file

Consider this blog for CORS issue. You should add CORS header ie. Access-Control-Allow-Origin: * to the server config most probably.