How to implement javascript modularity on a webpage?

Question

Greetings I am learning javascript now and I want to know how to implement modularity in it. I googled some but didn't fully understood the method.

So I kindly ask for help. How to make this work?

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test Modularity</title>
  </head>
  <body>
      <button id="buttonFoo" type="button" onclick="foo()">Foo</button>
      <button id="buttonBar" type="button" onclick="bar()">Bar</button>
      <script src="main.js"></script>
  </body>
</html>

main.js

import { foo } from './foo.js'
import { bar } from './bar.js'

foo.js

export function foo()
{
    alert("FOO!");
}

bar.js

export function bar()
{
    alert("BAR!");
}

When I click on the buttons I get this error in debug.

Uncaught ReferenceError: foo is not defined
Uncaught ReferenceError: bar is not defined

Thanks in advance for your time.

machineghost · Accepted Answer · 2021-05-30 18:10:20Z

2

In short, you can't just throw module-using code into the browser and expect it to work, because the web was built before modules existed, and so its "default module system" is to have none at all.

The longer answer is that you need to follow certain steps, detailed here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules

Most importantly, you need to use a type of "module" on your script tags:

<script type="module">/* ... your code */ </script>

or:

<script type="module" src="index.js"></script>

answered May 30, 2021 at 18:10

machineghost

36k33 gold badges174 silver badges270 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Katarok Virus Over a year ago

I put the ``` <script type="module" src="./main.js"></script> ``` but I got the ``` Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///path/to/main.js. (Reason: CORS request not http). ``` error it has opened a whole new rabbithole that I don't know how to solve.

machineghost Over a year ago

From the article I linked: "You need to pay attention to local testing — if you try to load the HTML file locally (i.e. with a file:// URL), you'll run into CORS errors due to JavaScript module security requirements. You need to do your testing through a server." In other words, the root domain of your HTML file and all JS files needs to be the same.

Collectives™ on Stack Overflow

How to implement javascript modularity on a webpage?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related