Learning how to use ES6 import and modules getting Reference Error

Question

I am just beginning to learn ES6 imports, with the hopes to transition an application to modular ES6. My current project has the following directory structure:

index.html
-scripts\
   --function1.js
   --function2.js
   --globals.js
   --main.js

My index.html file code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Modular JS Example</title>
</head>
<body>
  <button onclick="changevar1()">Change Var 1</button>
  <button onclick="changevar2()">Change Var 2</button>
  <script src="scripts/main.js" type="module"></script>

</body>
</html>

As you can see, I have two buttons which have onclick triggers assigned to them. These functions namely, changevar1() and changevar2() are found in files function1.js and function2.js respectively. And my entry point is main.js.

My main.js is as follows:

import {globalvar1 as globalvar1,
  globalvar2 as globalvar2} from "./globals.js";
import {changevar1 as changevar1} from "./function1.js";
import {changevar2 as changevar2} from "./function2.js";

console.log(globalvar1, globalvar2,changevar1,changevar2);

My globals.js is where I declare some global variables which will be used by functions in either functions1.js or functions2.js and is as follows:

export let globalvar1 = "I am globalvar1";
export let globalvar2 = "I am globalvar2";

My function1.js has the function for the first button and is as follows:

import { globalvar1 } from "./globals.js" //do I need to import here?

export function changevar1() {
  globalvar1 = "Now changed globalvar1"
  console.log(globalvar1);
}

In the case above, I am importing the globalvar1 from globals.js and I am not sure if that is required, or if it will all come together in main.js?

My function2.js has the function for the second button and is as follows:

export function changevar2() {
  globalvar2 = "Now changed globalvar2"
  console.log(globalvar2);
}

In this case, I was not importing the globalvar2, just to see if it was not required.

Now the question is simply when you press the button how can you trigger either changevar1() or changevar2() to change the globalvar1 or globalvar2? I keep getting "Reference errors".

I have read several online documents and watched a few video tutorials online too to try to understand modular js. Please excuse my lack of knowledge about modules and any help even if very basic knowledge is helpful.

You cannot use es6 module directly on the browser you need to have a compiler that converts your es6 code into es5 like [Babel](https://babeljs.io/) So you need to have a node server which converts you js file into a bundle. Most of the Frameworks like React , Angular follow this process — Dibakar Halder, Dec 07 '19 at 16:25
My understanding was ES6 modules are compatible in latest version of Chrome and Firefox as per MDN at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Browser_compatibility, showing that it has been available for several versions now? — Coola, Dec 07 '19 at 16:31
are the console logs printing the functions and can you directly call the functions from the console to see that are they available in the global scope? — Dibakar Halder, Dec 07 '19 at 16:42
The `console.log` in main.js shows everything gets imported. However, if you open up a console and try to type in the imports for e.g. `changevar1()` it gives you a reference error. — Coola, Dec 07 '19 at 16:48
@DibakarHalder That is quite outdated, you can use modules in modern browsers just fine. — Bergi, Dec 07 '19 at 18:52
Issue 1: your functions are module-scoped, you cannot access them from inline `onclick` attribute event handlers. Instead, use DOM methods to install your click event listeners. Issue 2: you cannot assign to imported variables, they are read-only. You would need to declare your functions in the same file as the variables, where they can assign the local variables (regardless of the fact they are exported). — Bergi, Dec 07 '19 at 18:54
I read this answer (https://stackoverflow.com/questions/44590393/es6-modules-undefined-onclick-function-after-import) which suggests to either (1) expose the function/var as `window.functionname` or (2) use `addEventListener`. In case of (1) is it ok to do so provided you use a namespace like your application name if it is pretty discrete for e.g. `window.DiscreteAppName.functionname`? Or is that considered bad practice? — Coola, Dec 08 '19 at 17:40

Learning how to use ES6 import and modules getting Reference Error

0 Answers0