script type="module" in javascript

· 129 words · 1 minute read

#Why type=“module” is used in the <script> element?

Rather than writing out whole Javascript application in one big file, it can be broken down into multiple files called modules. Modules are just .js files which can be imported into other files and has some exported code (functions or variables).

export const USER_ACCESS_TYPES = {
  admin: "full access",
  contributor: "read, write access",
  user: "read access",
};

export const getUserAccessType = (userType) => {
  return USER_ACCESS_TYPES[userType];
};

These values can be imported in other script files and used. But to import them inside <script> tag we need to define it’s type as a module like below.

<script type="module">
  import {(USER_ACCESS_TYPES, getUserAccessType)} from './user-access-types.js';
</script>

Also modules doesn’t work with file:// protocol and has to be used with either http or https.