Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

The community reviewed whether to reopen this question 3 months ago and left it closed:

Original close reason(s) were not resolved

It is being served by NPM http-server . When I connect with Chrome (v65), I see the following error

(index):8 Uncaught ReferenceError: showImportedMessage is not defined
    at HTMLButtonElement.onclick ((index):8)
onclick @ (index):8
If I get rid of type=module (and import/export by putting the showMessage function right in showImport.js) everything works, but the whole purpose of this was to use modules.
Also I had to add that useless export default statement, without it Chrome would complain:
Uncaught SyntaxError: The requested module '/show.js' does not provide an export named 'default'
So what am I missing here?
In a module context, variables don't automatically get declared globally. You'll have to attach them to window yourself. This is to prevent the scope ambiguity issues that you'd run into when using normal script tags.
The import/export usage is incorrect.
If you export function xyz, you must import { xyz }
If you export default function xyz, you must import xyz or import { default as xyz }
See this article for more information on the module syntax.
showImport.js:
import { showMessage } from './show.js'
window.showImportedMessage = function showImportedMessage() {
    showMessage()
show.js:
export function showMessage() {
    alert("Hello!")
                Can you make an example of point 1? Is there a better/nicer way than assigning to window?
– El Mac
                Dec 11, 2018 at 9:38
                Assigning to window is fine. Makes it 100% clear that you're adding something into the global namespace (something that var in a traditional non-module script tag doesn't make clear). In a larger project, you could accidentally have two variables named "user" if you aren't careful, for example. Good practices can help avoid silly issues like that, but modules prevent them from happening entirely.
– kingdaro
                Dec 13, 2018 at 4:21
                @ElMac In order to create a global variable in a module context you need to add the variable straight to the HTML via script tags, e.g. <script> let myVar; </script>
– René K
                May 20, 2020 at 16:56
                Yeah, this doesn't work for me either on MS Edge 93. I literally copy-pasted the code in the question and answer. I just get no feedback at all.
– Jordan Mitchell Barrett
                Sep 25, 2021 at 13:41
                @AndrewS Can you please not make rude presumptions about how the question was answered 🙃Nonetheless, there's a typo; A ./ will be needed to import the show file. Fixed that, and it seems to work now. Even then, cross-browser differences are a maze, and I can't account for everything. Opening a new question for your specific case would be more productive.
– kingdaro
                Nov 3, 2021 at 4:38