I am able to define a module in my html file me.html:

<script type="module" id="DEFAULT_MODULE">   
           import Atom from './atom.js';       
           console.log("definition of getAtom")
           export default function getAtom(){
            return new Atom('atom');
           }
           console.log("exported getAtom")
</script>

Also see

=> Is it possible to import that "anonymous" module to another module script in the same html file? Or to some "code behind"- JavaScript file that also has been loaded by the me.html file? The export seems to work; at least it does not throw any error.

For the import of the getAtom method I tried for example:

<script type="module">
    import getAtom from '.'; //this line does not work
    console.log("usage of getAtom")
    var atom = getAtom();             
</script>

I would expect some syntax like

 import getAtom;
 import getAtom from '.';
 import getAtom from window;
 import getAtom from './me.html';
 import getAtom from '.DEFAULT_MODULE';

However, none of these lines worked.

=>What is the correct syntax to reference the "anonymous" module if it is possible at all?

I use Chrome version 63.0.3239.108.

Related question:

How to dynamically execute/eval JavaScript code that contains an ES6 module / requires some dependencies?

I am able to define a module in my html file me.html:

<script type="module" id="DEFAULT_MODULE">   
           import Atom from './atom.js';       
           console.log("definition of getAtom")
           export default function getAtom(){
            return new Atom('atom');
           }
           console.log("exported getAtom")
</script>

Also see

• https://blog.whatwg/js-modules
• https://github./whatwg/html/pull/443#issuement-167639239

=> Is it possible to import that "anonymous" module to another module script in the same html file? Or to some "code behind"- JavaScript file that also has been loaded by the me.html file? The export seems to work; at least it does not throw any error.

For the import of the getAtom method I tried for example:

<script type="module">
    import getAtom from '.'; //this line does not work
    console.log("usage of getAtom")
    var atom = getAtom();             
</script>

I would expect some syntax like

 import getAtom;
 import getAtom from '.';
 import getAtom from window;
 import getAtom from './me.html';
 import getAtom from '.DEFAULT_MODULE';

However, none of these lines worked.

=>What is the correct syntax to reference the "anonymous" module if it is possible at all?

I use Chrome version 63.0.3239.108.

Related question:

How to dynamically execute/eval JavaScript code that contains an ES6 module / requires some dependencies?

• javascript
• html
• es6-modules

Share Improve this question Follow edited Dec 27, 2017 at 9:13 Stefan asked Dec 26, 2017 at 18:14 StefanStefan 12.5k99 gold badges7777 silver badges138138 bronze badges 4

• Import from codebehind from a HTML file? I don't think so. This is ugly codding right there, I don't see any usages for a script tag with module type. It'll just make things messy. – Phiter Commented Dec 26, 2017 at 18:16
• Please see the related question for an example usage. I am open to less ugly alternatives if you know some. – Stefan Commented Dec 26, 2017 at 18:20
• There is now a proposal to add a name attribute to script tags that could then be used to refer to them in import statements. – cpcallen Commented Feb 11, 2022 at 12:36
• Does this answer your question? Inlining ECMAScript Modules in HTML – Sebastian Commented May 7, 2022 at 19:39

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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.