title: Uncaught SyntaxError: The requested module '../user_module/User.js' does not provide an export named 'User' main.js:1
body: <p>I am having some difficulty getting a simple JavaScript module example to work. For the example code below I get an error stating:</p>
  <p><strong>Uncaught SyntaxError: The requested module '../user_module/User.js' does not provide an export named 'User' main.js:1</strong></p>
  <p>Here is my project directory structure:</p>
  <p>module_tester<br />
  ├──css<br />
  ├   ├──module_tester_style.css<br />
  ├──test<br />
  ├   ├──main.js<br />
  ├──user_module<br />
  ├   ├──User.js<br />
  ├──index.html<br /></p>
  <p><strong>Here is my index.html file:</strong></p>
  <p>&lt;!doctype html&gt;</p>
  
  <pre><code>&lt;head&gt;
      &lt;title&gt;JS Modules&lt;/title&gt;
      &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;./css/module_tester_style.css&quot; /&gt;
      &lt;script type=&quot;module&quot; src=&quot;./test/main.js&quot;&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;h1&gt;Module Tester&lt;/h1&gt;
  
      &lt;h3 id=&quot;user_results&quot;&gt;Enter User Data Below&lt;/h3&gt;
  
      &lt;form&gt;
          &lt;label for=&quot;userName&quot; class=&quot;user-name&quot;&gt;User Name:&lt;/label&gt;
          &lt;input id=&quot;userNameTF&quot; type=&quot;text&quot;&gt;
  
          &lt;label for=&quot;dobMonth&quot; class=&quot;dob-month&quot;&gt;DOB Month:&lt;/label&gt;
          &lt;input id=&quot;userDobMonthTF&quot; type=&quot;text&quot;&gt;
  
          &lt;label for=&quot;dobDay&quot; class=&quot;dob-day&quot;&gt;DOB Day:&lt;/label&gt;
          &lt;input id=&quot;userDobDayTF&quot; type=&quot;text&quot;&gt;
  
          &lt;label for=&quot;dobYear&quot; class=&quot;dob-year&quot;&gt;DOB Year:&lt;/label&gt;
          &lt;input id=&quot;userDobYearTF&quot; type=&quot;text&quot;&gt;
  
          &lt;button onclick=&quot;getAndDisplayUserAge()&quot;&gt;Calculate Age&lt;/button&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  <p><strong>Here is main.js:</strong></p>
  <pre><code>import { User, DateOfBirth } from '../user_module/User.js'
  
  export function getAndDisplayUserAge() {
      let name = document.getElementById(&quot;userNameTF&quot;).value;
      let dobMonth = document.getElementById(&quot;userDobMonthTF&quot;).value;
      let dobDay = document.getElementById(&quot;userDobDayTF&quot;).value;
      let dobYear = document.getElementById(&quot;userDobYearTF&quot;).value;
  
      let user = new User(name, dobMonth, dobDay, dobYear);
      document.getElementById(&quot;user-results&quot;).value = user.toString();
      let dob = user.dob;
      console.log(&quot;User dob: &quot; + dob);
  }
  </code></pre>
  <p><strong>And here is User.js</strong></p>
  <pre><code>export default class User {
      constructor(initName, initMonth, initDay, initYear) {
          this.name = initName;
          this.dob = new DateOfBirth(initMonth, initDay, initYear);
      }
  
      toString() {
          return this.name + &quot;, born &quot;
                  + this.dob.toString()
                  + &quot; (&quot; + this.dob.calculateAge()
                  + &quot; years old&quot; + &quot;)&quot;;
      }
  }
  
  export class DateOfBirth {
      constructor(initMonth, initDay, initYear) {
          this.month = initMonth;
          this.day = initDay;
          this.year = initYear;
      }
  
      calculateAgeInYears() {
          // GET THE DATE RIGHT NOW
          let now = new Date();
          let ageInYears = now.getFullYear() - this.year;
          if (now.getMonth() - this.month)
              ageInYears--;
          else if (((now.getMonth() - this.month) === 0)
                  &amp;&amp; (now.getDate() &lt; this.day))
              ageInYears--;
          return ageInYears;
      }
  }
  </code></pre>