After doing some more research, I’ve found: Imports ARE hoisted! according to the spec of ModuleDeclarationInstantiation ALL the dependent Modules will be loaded before running any code. This code will have no errors, and will work: localFunc(); import {myFunc1} from ‘mymodule’; function localFunc() { // localFunc is hoisted myFunc1(); }
defaultMember already is an alias – it doesn’t need to be the name of the exported function/thing. Just do import alias from ‘my-module’; Alternatively you can do import {default as alias} from ‘my-module’; but that’s rather esoteric.
As @Bergi mentioned in the comment, adding type=”module” to the main.js import line in the HTML solved the issue. All is working now. I.e. <script type=”module” src=”https://stackoverflow.com/questions/47632562/assets/js/main.js”> Thanks to all of you who responded and tried to help.
In ES6, imports are live read-only views on exported-values. As a result, when you do import a from “somemodule”;, you cannot assign to a no matter how you declare a in the module. However, since imported variables are live views, they do change according to the “raw” exported variable in exports. Consider the following code … Read more
TL;DR: It does not matter. import * as … from ‘ramda’; import { … } from ‘ramda’; will both by default always bring in the complete Ramda module with all its dependencies. All code inside the module would be run, and which syntax was used to reference the exported bindings doesn’t matter. Whether you use … Read more
import {Link} from ‘react-router’; imports a named export from react-router, i.e. something like export const Link = 42; import Router from ‘react-router’; const {Link} = Router; pulls out the property Link from the default export, assuming it is an object, e.g. export default { Link: 42 }; (the default export is actually nothing but a … Read more
The extension is part of the filename. You have to put it in. As proof of this, please try the following: rename file to drawImage.test edit index.js to contain ‘./drawImage.test’ Reload, and you’ll see the extension js or test will be completely arbitrary, as long as you specify it in the export. Obviously, after the … Read more
Each module has its own scope. They are not sharing the global scope like “normal” scripts do. That means hello is only accessible inside the main.js module/file itself. If you explicitly want to create a global variable, you can achieve that by creating a property on the global object, window: function hello() { console.log(mod()); } … Read more
2018 Update: The module loader spec is now a part of the ES Spec – what you are describing is allowed and possible with <script type=”module”> in browsers and with a custom –loader with Node.js as well as with Deno if you’re into that. The module loader spec and the import/export syntax are separate. So … Read more
As of Node.js 10.12 there’s an alternative that doesn’t require creating multiple files and handles special characters in filenames across platforms: import { dirname } from ‘path’; import { fileURLToPath } from ‘url’; const __dirname = dirname(fileURLToPath(import.meta.url));