JavaScript ES6 Module basic question: .mjs file extension and MIME type

Question

I'm experiencing what I hope is a trivial issue with ES6 modules:

If I use a .mjs file extension for a JavaScript module, browsers such as Chrome and Firefox are happy - but if I use .js, I get error messages.
BUT, the very simpleminded server that I need to use (it's a specialized embedded server), serves up .mjs files with a MIME type of plain text, rather than as JavaScript.

Here's a simple example:

Default.html:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script src="/ModuleTest/modScript.js" type="module"></script>;
<script src="/ModuleTest/moduleTest.js" type="module"></script>;
<title>Module Test</title>
</head>
    
<body>
<script  type="text/JavaScript">
    document.getElementById("field1").innerHTML = square(33);
    
</script>
    
<div class="textField" id="field1">xxx</div>                                                     

</body>
</html>

And moduleTest.mjs:

// JavaScript Document
'use strict';
'sourceType: module';

export function square (x) {
    return x * x;
}

Here, if I use a file extension of .js (moduleTest.js), I get error messages like:

ERROR: Parsing error: 'import' and 'export' may only appear with 'sourceType: module'

I seem to be stuck. The modules are only treated as modules by the browser if they have an .mjs file extension ... BUT .mjs files are served up as plain text files, and I get MIME errors from the server.

This seems like the kind of basic question that Mr. Google should be able to answer in a few minutes - but multiple readings of my JavaScript books, and a multitude of searches have failed to yield a solution.

Getting .js files to actually be parsed as modules seems to be the only option, since I have no control over the idiot server. I don't understand why specifying

<script src="/ModuleTest/moduleTest.js" type="module"></script>;

doesn't do the trick.

The runtime error I get is:

Uncaught ReferenceError: square is not defined
  at default.html: 12

What am I doing wrong?

Answer 1

So, what is happening here is that your module is not exporting square to anything. Exports like that only work when you import them into another script.

For example, if you import the script into another module (keep in mind that you cannot import local modules in a web page) then you can use it:

//File: /ModuleTest/modScript.js
'use strict';
'sourceType: module';

export function square (x) {
    return x * x;
}

//File: /ModuleTest/impScript.js
'use strict';
'sourceType: module';

import { square } from "./modScript";

console.log(square(2)); //4

Now, imported variables are (at least in my experience and all of my failures to do this) are not added to the window. For example, if I had this:

 <!doctype html> <html> <head /> <body> <script type="module"> import { Octokit } from "https://cdn.skypack.dev/octokit"; console.log("From import:", Octokit) // class extends this { ... } </script> <script type="text/javascript"> console.log(Octokit) //Uncaught ReferenceError: Octokit is not defined </script> <script type="text/javascript"> console.log("From window:", window.Octokit) //undefined </script> </body> </html>

The Octokit variable is only avaliable in the type="module" script, and it is loaded after the rest of the scripts.

JavaScript ES6 Module basic question: .mjs file extension and MIME type

Question

1 answers

solution1
1 ACCPTED 2021-07-16 19:54:27

JavaScript ES6 Module basic question: .mjs file extension and MIME type

Question

1 answers

solution1 1 ACCPTED 2021-07-16 19:54:27

solution1
1 ACCPTED 2021-07-16 19:54:27