title: Difficulty using import/export for two javascript files. getting the: Failed to load resource: the server responded with a status of 404 (Not Found)
body: <p><br> I get the:
  Failed to load resource: the server responded with a status of 404 (Not Found)
  when I try to import/export &quot;class Hero&quot;.
  Im pretty new in js, and would like to code a game. Im using this:
  <a href="https://www.youtube.com/watch?v=3EMxBkqC4z0" rel="nofollow noreferrer">https://www.youtube.com/watch?v=3EMxBkqC4z0</a>
  as a foundation. I wanted to change it as I need, but got stoped at. the beginning. Tried to find solutions, but anything I found lead me into other problems. Its started from: SyntaxError: Unexpected identifier 'Hero'. import call expects exactly one argument. After I fount a solution, it went into &quot;Failed to load resource: the server responded with a status of 404 (Not Found)&quot; and... now I don't really know what to do to move on.</p>
  <p>Here is the code:</p>
  <pre><code>1)hero.js 
  export default class Hero {
  
      constructor(gameWidth, gameHeight) {
  
          this.width = 150;
  
          this.height = 20;
  
  
  
          this.position = {
  
              x: gameWidth / 2 - this.width / 2,
  
              y: gameHeight - this.height - 10,
  
          }
  
  
  
      }
  
      draw(ctx) {
  
          ctx.fillStyle = &quot;blue&quot;;
  
          ctx.fillRect(this.position.x, this.position.y, this.width, this.height)
  
  
  
      }
  
  }
  
  2) index.js 
  import { Hero } from &quot;./hero&quot;;;
  
  
  
  let canvas = document.getElementById(&quot;gameScreen&quot;);
  
  let ctx = canvas.getContext(&quot;2d&quot;);
  
  
  
  const GAME_WIDTH = 1280;
  
  const GAME_HEIGHT = 720;
  
  
  
  ctx.clearRect(0, 0, 1280, 720);
  
  
  
  let hero = new Hero(GAME_WIDTH, GAME_HEIGHT);
  
  
  
  hero.draw(ctx);
  
  3) index.html
  &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;FrogAttack&lt;/title&gt;
      &lt;style&gt;
          #gameArea {
              border: 4px solid black;
          }
          
          body {
              height: 100vh;
              background: rgb(2, 0, 36);
              background: radial-gradient(circle, rgba(2, 0, 36, 1) 0%, rgba(62, 5, 22, 1) 81%, rgba(121, 9, 9, 1) 97%);
              text-align: center;
              overflow: hidden;
          }
          
          h1 {
              font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
              color: whitesmoke;
              letter-spacing: 3px;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;h1&gt;Frog Attack&lt;/h1&gt;
      &lt;canvas id=&quot;gameArea&quot; width=&quot;1280&quot; height=&quot;720&quot;&gt;&lt;/canvas&gt;
      &lt;script type=&quot;module&quot; src=&quot;index.js&quot;&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>