title: JavaScript Inheritance: Calling a prototypal object in a HTML document - How to use Modules
body: <p>I am struggling to produce a working JavaScript hierarchy. The basic example is as follows:</p>
  <pre><code>'use strict';
      
      const personFactory = (name) =&gt; ({
          talk() {
              console.log(`${name} says hello`);
          }
      });
  
  
  'use strict';
  
  const mammal = {
      isVertebrae: true
  };
  
  import * as mammal from './mammal.js';
  import * as personFactory from './personFactory.js';
  'use strict';
  
  const personMammalFactory = (name) =&gt; (
      Object.assign(
          {},
          mammal,
          personFactory(name)
      )
  );
  
  
  &lt;script type=&quot;module&quot; src=&quot;~/js/modules/personMammalFactory.js&quot;&gt;&lt;/script&gt;
  
  
  &lt;script&gt;
  
  var factory = personMammalFactory('Brian');
  factory.personFactory.talk();
  
  &lt;/script&gt;
  </code></pre>
  <p>personMammalFactory('Brian') throws a reference error: <em>Uncaught ReferenceError: personMammalFactory is not defined</em></p>
  <p>Please note that all three objects are in a separate file (personFactory.js, mammal.js, and personMammalFactory.js).</p>
  <p>I cannot seem to call the personMammalFactory correctly into the HTML document. Can you please give me direction on what I might be doing incorrectly?</p>