Inlining Ecmascript Modules in HTML

Correct Syntax for Inline ES6 Modules?

Both are valid, although I would argue <module> is slightly more correct, see explanation below:

The code inside <script> elements does not support module syntax, because the element’s synchronous nature is incompatible with the asynchronicity of modules. Instead, you need to use the new <module> element. It has several significant advantages over <script>. However script can used in its alternative form <script type="module">.

How to import es6 module that has been defined in script type=module tag inside html?

As I understand, there is no way to import "anonymous" module, because "anonymous" module have no module specifier or individual url (its import.meta.url is just the html url as current spec). In theory it can be extended in the future, but I can not find the good use cases for such feature.

Javascript import module to index.html not running due to errors

module.js should be ./module.js
You don't need to import the module at the beginning of the page (but you can).
Using import requires the script to be of type module not just the imported script.
You should place modules imports in <head> (at the very beginning).

The following example works (I cut out unessential parts):

<!-- index.html -->
<meta charset="utf-8">

<script type="module">
  import { addTextToBody } from './module.js';

  addTextToBody('some text here');
</script>

// module.js
export function addTextToBody(text) {
  const div = document.createElement('div');
  div.textContent = text;
  document.body.appendChild(div);
}

The code provided above will work with Firefox, but not with Chrome. It appears you are using Chrome (I assume that from your error message). Chrome strictly forbids access to resources with the file:// protocol. There are a handful solutions:

Host your code with a webserver (e.g. nginx).
Use a different webbrowser (e.g. Firefox).
Disable web security altogether, refer to this answer.

Javascript ES6 onclick load module...can it be done?

In the following case I am using libraries that you can get through http and then append the html with a script that points to that library you asked to be required. If the module is local, then you just use the filepath of those modules. I assume that those modules are transpiled into some sort of built folder along with the html, so you can access if from there.

function loadModule(module) {  var script = {    'jquery': 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js',    'knockout': 'https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js'  }[module];  document.body.innerHTML += `<script src=${script} type='text/javascript'><\/script>`;  console.log(module + ' module loaded');}

<button onclick="loadModule('jquery')">Load jquery </button><button onclick="loadModule('knockout')">Load knockout.js </button>

How will ECMAScript 6 Harmony modules be managed in HTML script tags?

~~Modules can be concatenated together without issue with the module SomeName { /* module contents here */ } syntax~~.

EDIT: The module block syntax has been dropped from the spec. The conclusions of the committee seems to be that concatenation is a hack to work around a limitation of HTTP 1. The ultimate solution is to have an HTTP 2 aware server and client so that the client can multiplex its requests and the server can push additional resources to the client (Thanks Andreas!)

As for dealing with module semantics in the browser, a separate <module> tag was introduced for creating individual modules on the page. (Since modules can be resolved asynchronously, they don't match the semantics of inline script elements, hence the need for a new tag).

Are type=module javascript files all isolated from each other?

Yes. Resources to be used by other modules must be explicitly exported, and imported where they are needed.

Here is one of many guides to the ES6 module system.