Javascript module not working in browser?

Question

Alright, I have looked on this site and have found several different answers, none of which have worked for me. Basically had a js file that had many functions in it along with the main code for the app. I wanted to move all my functions to another js file so that I could clean up my code a little. I am fairly new to js but I know in python it was as simple as saying "import (module) as (nickname) from (path)"

anyways let's say I have a function named show message in my functions.js module.

export function show_message(){
    alert("Hello");
}

and then I at the top of my main.js file I did

import { show_message } from './functions.js'
//I have also tried to import like this:
import * as func from './functions.js'

//And then I call it
show_message();
//I have also tried
func.show_message();

I know this is something simple, but as I said everywhere I have looked I have seen different answers, none of which work for me. I am using Firefox btw. I am also getting an error in the console saying that my import declarations need to be at the top of my module, I fixed that by specifying the type in my HTML link (script src="/static/main.js" type="module") The error went away but is now saying "same origin policy disallows reading the remote resource at the file (path) (reason: cors request not HTTP)."

And the other error says "module source URI is not allowed in this document".

which makes me think maybe my syntax for importing is right and the error is in my HTML code?

Any help is appreciated.

Answer 1

JavaScript has had modules for a long time. However, they were implemented via libraries, not built into the language i.e. you can't import or export part of those modules into your js files (whole library needs to be loaded). ES6 is the first time that JavaScript has built-in modules.

Please refer Here for more info about ES modules.

But things have changed and ES modules are now available in browsers! They're in…

Safari 10.1+, Chrome 61+, Firefox 60+, Edge 16+, etc,.

Now, you need to create your JS file using a new extension .mjs, like,

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

and then, you can import that file into your html page like,

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

 addTextToBody('Modules are pretty cool.');
</script>

Please refer Here for more info about using ES module in browsers.

Answer 2

On the script tag you are using to load the js in the browser you need to add the attribute

type="module"

It will look like the following:

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

  addTextToBody('Modules are pretty cool.');
</script>

utils.mjs:

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

This is if you are not using a bundler like webpack and working directly in the browser.

Source of code: https://jakearchibald.com/2017/es-modules-in-browsers/

Answer 3

Using JS modules in the browser On the web, you can tell browsers to treat a element as a module by setting the type attribute to module.

<script type="module" src="main.mjs"></script>
<script nomodule src="fallback.js"></script>

More on https://developers.google.com/web/fundamentals/primers/modules

Answer 4

You might want to use broswerify instead. It allows you to write NodeJS-style modules and then compiles them into a single browser-friendly JavaScript file, allowing you to get all the performance benefits of loading only a single file. It also means you can easily use the same code both server side and client side.

If you want to stick with separate files, it looks like you are well on your way. Unlike regular JavaScript files, modules are subject to Cross-Origin Resource Sharing (CORS) restrictions. They have to be loaded from the same origin, and cannot be loaded from the local filesystem. If you are loading them from the local file system, move them to a server. If you are already hosting them on a server, add the Access-Control-Allow-Origin: * header to the response that serves the module file.

Lots more gotchas and solutions here and here.

Answer 5

If you're using webpack and babel and want to import the code into your bundle, I guess it should be one of the following:

export default function show_message(){
    alert("Hello");
}

and then in your code:

import show_message from 'path/to/show_message.js'
// or 
import { default as someOtherName } from 'path/to/show_message.js'

Or if you'd like to export several functions:

const show_message = function(){
    alert("Hello");
}
export { show_message };

and then in your code:

import { show_message } from 'path/to/show_message.js'
// or 
import { show_message as someOtherName } from 'path/to/show_message.js'

Hope that helps.

Answer 6

function show_message(){
    alert("Hello");
}

export { show_message };

and

import { show_message } from './functions'

i think this should do the trick. this is a named export/import technique. you can under this name find more information if you desire it.