title: Importing .js or .mjs files using Node webserver
body: <p>I installed Node.js and wanted to run a webserver that would show an html+javascript page that imports javascript functions from other .js files.
  Installing Node.js, running the webserver, and hosting a file locally all went very smoothly. But I keep having issues accessing the other .js files that I would like to import from test_functions.html.
  I have been following various online tutorials, and looking around on stack overflow, trying it in several different ways, but can't get it to work. I am thinking I might need to adjust something in the server.js file to allow my browser to acces the other files I want to import?
  Using .mjs extensions (instead of .js) I got my browser to recognise the functions I want to import, but it still doesn't manage to import the functions that I define in these .mjs files.</p>
  <p>Here is the code for server.js</p>
  <pre><code>// use the http library to start the node server
  const { read } = require('fs')
  const http = require('http')
  // additional library for file handling
  const fs = require('fs')
  // port we want to use
  const port = 3000
  // filename of the html page we want to show when accessing the server
  const file_name = 'test_functions.html'
  // create the server
  
  const server = http.createServer(function(req, res){
      // tell the brower we will be writing HTML
      res.writeHead(200, {'Content-Type':'text/html'})
      fs.readFile(file_name, function(error, data){
          if(error){
              res.writeHead(404)
              read.write('Error: File ' + file_name + ' not found')
          } else{
              res.write(data)
          }
          res.end()
      })
  })
  server.listen(port, function(error){
      if (error){
          console.log('Something went wrong', error)
      }
      else {
          console.log('Server is istenng on port ' + port)
      }
  })
  </code></pre>
  <p>My main page, test_functions.html looks as follows</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
      &lt;head&gt;
          &lt;meta charset=&quot;UTF-8&quot;&gt;
          &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
          &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
          &lt;title&gt;Document&lt;/title&gt;
          &lt;script src=&quot;test.mjs&quot; type=&quot;module&quot;&gt;
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;p&gt;Hey, click on the button below to invoke the function&lt;/p&gt;
          &lt;input type = &quot;button&quot; onclick = &quot;showAlert()&quot; value = &quot;Click Me&quot;&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>while the function that I placed in test.mjs looks as follows</p>
  <pre><code>export default function showAlert()
  {
      alert(&quot;welcome&quot;);  
  } 
  console.log('hello')
  </code></pre>
  <p>After trying it in various ways, the browser keeps giving me the following two errors:</p>
  <ul>
  <li>Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of &quot;text/html&quot;. Strict MIME type checking is enforced for module scripts per HTML spec.</li>
  <li>Uncaught ReferenceError: showAlert is not defined
  at HTMLInputElement.onclick</li>
  </ul>