title: Express error: Strict MIME type checking is enforced for module scripts per HTML spec
body: <p>I'm trying to build a simple single page application via express.</p>
  <p>Everything works fine until I start creating the classes, then the browser throws the following error:</p>
  <blockquote>
  <p>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.</p>
  </blockquote>
  <p>I was hoping that <code>express.static()</code> would make that go away but that's not the case.
  I'm not very skilled yet with JS, Node and all that, so I apologize for anything dumb here.</p>
  <p>My code is quite simple at the moment:</p>
  <p>file architecture:</p>
  <pre><code>-server.js
  -[frontend]
  +-[static]
  ++-index.html
  ++-[js]
  +++-index.js
  +++-[views]
  ++++-AbstractView.js
  ++++-Home.js
  -[node_modules]
  -package.json
  </code></pre>
  <p>server.js</p>
  <pre><code>const express = require('express');
  const path = require('path');
  
  const App = express()
  
  App.use('/static', express.static(path.resolve(__dirname, 'frontend', 'static')))
  App.get('/*', (req, res) =&gt; {
      res.sendFile(path.resolve(__dirname, &quot;frontend&quot;, &quot;index.html&quot;))
  })
  App.listen(3000, () =&gt; console.log(&quot;server running on port 3000&quot;))
  </code></pre>
  <p>index.js:</p>
  <pre><code>import Home from &quot;./views/Home&quot;
  
  const navigateTo = url =&gt; {
      history.pushState(null, null, url)
      router()
  }
  
  const router = async() =&gt; {
      const routes = [{
                  path: '/',
                  view: new Home()
              },
              // {
              //     path: '/projects',
              //     view: () =&gt; console.log('projects')
              // },
              // {
              //     path: '/about',
              //     view: () =&gt; console.log('about')
              // },
              // {
              //     path: '/studies',
              //     view: () =&gt; console.log('studies')
              // },
          ]
          // test routes for matches
      const potentialMatches = routes.map(route =&gt; {
          return {
              route: route,
              isMatch: location.pathname === route.path
          }
      })
  
      /**
       * NEED TO SET 404 PAGE!
       */
      let match = potentialMatches.find(potentialMatch =&gt; potentialMatch.isMatch)
      if (!match) {
          match = {
              route: routes[0],
              isMatch: true
          }
      }
  
      const view = new match.route.view()
      const content = document.querySelector(&quot;#app&quot;)
      content.innerHTML = await view.getHtml()
      console.log(content);
  }
  
  window.addEventListener(&quot;popstate&quot;, router);
  
  document.addEventListener(&quot;DOMContentLoaded&quot;, () =&gt; {
      document.body.addEventListener(&quot;click&quot;, e =&gt; {
          if (e.target.matches(&quot;[data-link&quot;)) {
              e.preventDefault()
              navigateTo(e.target.href)
          }
      })
      router()
  })
  </code></pre>
  <p>the Home class (extending and AbstractView general class):</p>
  <pre><code>import AbstractView from &quot;./AbstractView&quot;;
  
  export default class Home extends AbstractView {
      constructor() {
          super()
          this.setTitle(&quot;Home&quot;)
      }
      setTitle(title) {
          document.title = title
      }
  
      async getHtml() {
          return `&lt;h1&gt;Home&lt;/h1&gt;`;
      }
  }
  </code></pre>
  <p>The generic class:</p>
  <pre><code>export default class AbstractView {
      constructor() {
  
      }
      setTitle(title) {
          document.title = title
      }
  
      async getHtml() {
          return &quot;&quot;;
      }
  }
  </code></pre>
  <p>of course, the index.html file:</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 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;Paolo Iocca&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class=&quot;menu&quot; id=&quot;menu&quot;&gt;
          &lt;span class=&quot;menu__line&quot;&gt;&lt;/span&gt;
          &lt;span class=&quot;menu__line&quot;&gt;&lt;/span&gt;
          &lt;span class=&quot;menu__line&quot;&gt;&lt;/span&gt;
      &lt;/div&gt;
      &lt;aside class=&quot;aside&quot;&gt;
          &lt;nav class=&quot;nav&quot;&gt;
              &lt;ul class=&quot;nav__list&quot;&gt;
                  &lt;li class=&quot;nav__list__item&quot;&gt;
                      &lt;a href=&quot;/&quot; class=&quot;nav__list__item__link&quot; data-link&gt;home &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class=&quot;nav__list__item&quot;&gt;
                      &lt;a href=&quot;/projects&quot; class=&quot;nav__list__item__link&quot; data-link&gt;projects&lt;/a
              &gt;
            &lt;/li&gt;
            &lt;li class=&quot;nav__list__item&quot;&gt;
              &lt;a href=&quot;/about&quot; class=&quot;nav__list__item__link&quot; data-link&gt;about &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class=&quot;nav__list__item&quot;&gt;
                      &lt;a href=&quot;/studies&quot; class=&quot;nav__list__item__link&quot; data-link&gt;studies
              &lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
      &lt;/aside&gt;
      &lt;div id=&quot;app&quot;&gt;&lt;/div&gt;
      &lt;script type=&quot;module&quot; src=&quot;/static/js/index.js&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  <p>Hope you can help me with this. Thanks a lot.</p>
  <p>_____ UPDATE</p>
  <p>here's the package.json file, just in case:</p>
  <pre><code>{
      &quot;dependencies&quot;: {
          &quot;express&quot;: &quot;^4.17.1&quot;
      },
      &quot;name&quot;: &quot;boilerplate-server&quot;,
      &quot;version&quot;: &quot;1.0.0&quot;,
      &quot;main&quot;: &quot;server.js&quot;,
      &quot;devDependencies&quot;: {
          &quot;nodemon&quot;: &quot;^2.0.14&quot;,
          &quot;serve-static&quot;: &quot;^1.14.1&quot;
      },
      &quot;scripts&quot;: {
          &quot;dev&quot;: &quot;nodemon server&quot;,
          &quot;start&quot;: &quot;node server.js&quot;
      },
      &quot;keywords&quot;: [],
      &quot;author&quot;: &quot;&quot;,
      &quot;license&quot;: &quot;ISC&quot;,
      &quot;description&quot;: &quot;&quot;
  }
  </code></pre>