I have a simple html file:
<html>
<head>
<meta charset="utf-8"/>
<title>Test</title>
</head>
<script type="module">
import init from './target/test.js'
init()
</script>
</html>
And in the target folder a test.js file:
function init() {
console.log("It works");
}
export default init;
But when I open the html file with firefox I get the following errors in the console:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///C:/Users/wanne/Bureaublad/hmm/target/test.js. (Reason: CORS request not http).
Module source URI is not allowed in this document: “file:///C:/Users/wanne/Bureaublad/hmm/target/test.js”.
According to this article, running modules require a HTTP(s) connection and will not work locally:
If you try to open a web-page locally, via file:// protocol, you’ll find that import/export directives don’t work. Use a local web-server, such as static-server or use the “live server” capability of your editor, such as VS Code Live Server Extension to test modules.
So I'd suggest exactly that and instead of running it locally, use a live server extension from your preferred text editor.