title: Uncaught ReferenceError: Alert is not defined in javascript
body: <p>I am getting a "referenceError: Alert is not defined" when I click on the "OK" button of the dialog. The code works fine as expected when I call "render" function from the same file. Issues of reference error come up when I export "Alert" and I call "render" function from a different file. I wanted it to reusable but calling it in different files. I need some help. Here is my code snippets.</p>
  
  <pre><code>//dialogs.js
  function CustomAlert(){
  
  this.render = function(dialog){
      let winW = window.innerWidth;
      let winH = window.innerHeight;
      let dialogoverlay = document.getElementById('dialogoverlay');
      let dialogbox = document.getElementById('dialogbox');
      dialogoverlay.style.display = 'block';
      dialogoverlay.style.height = winH+'px';
      dialogbox.style.left = (winW/2) - (550 * .5)+'px';
      dialogbox.style.top = '100px';
      dialogbox.style.display = 'block';
      document.getElementById('dialogboxhead').innerHTML = 'Acknowledge this message';
      document.getElementById('dialogboxbody').innerHTML = dialog;
      document.getElementById('dialogboxfoot').innerHTML = '&lt;button onclick="Alert.ok()"&gt;OK&lt;/button&gt;';
  };
  
  this.ok = function(){
      document.getElementById('dialogbox').style.display = 'none';
      document.getElementById('dialogoverlay').style.display = 'none';
  };
  
  }
  export let Alert = new CustomAlert();
  
  
  
    //user.js
    import {Alert} from './dialogs.js';
    .
    .
    .
    .catch(error =&gt; {
          console.log('Failure', error);
          Alert.render('Something wrong happened, Please try again.');
      });
  
  
      //signup.html
       &lt;script src="js/dialogs.js" type="module"&gt;&lt;/script&gt;
       &lt;script src="js/user.js" type="module"&gt;&lt;/script&gt;
  </code></pre>