title: How to import ES6 style modules in a WordPress environment?
body: <p>I'm getting stuck using Modules in a WordPress environment. Mind you, this is the first time I'm working with Modules and I'm just trying to clean up my code and organize on my companies website.</p>
  <p>I'm getting an error: <code>Uncaught SyntaxError: import declarations may only appear at top level of a module</code> using FireFox.</p>
  <h2>Outline of issue:</h2>
  <p>I want to use functions from my <code>helpers.js</code> files in other files, like a <code>product.js</code> file. I'm using WordPress to enqueue them.</p>
  <h3>Enqueuing the files:</h3>
  <p>I have a <code>functions.php</code> file that enqueues the the module script, then appends the <code>type=&quot;module&quot;</code> then enqueues my <code>product.js</code> file.</p>
  <pre><code>if (is_product()) {
  
     // Helper JS Module:
     wp_enqueue_script('helper-js', get_template_directory_uri() . '/js/helpers.js', array('product-js'), $theme_version, true);
  
     //Imports Helpers.js as a module:
     add_filter('script_loader_tag', 'add_type_to_script', 10, 3);
     function add_type_to_script($tag, $handle, $source) {
         if ('helper-js' === $handle) {
             $tag = '&lt;script src=&quot;' . $source . '&quot; type=&quot;module&quot; &gt;&lt;/script&gt;';
         }
         return $tag;
     }
  
     // Main Product JS
     wp_enqueue_script('product-js', get_template_directory_uri() . '/js/product.js', array(), $theme_version, true);
  }
  
  </code></pre>
  <h3>ES6 Module:</h3>
  <p>In <code>helpers.js</code>:</p>
  <pre><code>const removeThisOption = (selectBox, optValue) =&gt; {
    for (var i = 0; i &lt; selectBox.length; ++i) {
      if (selectBox.options[i].value === optValue) {
        selectBox.classList.remove(&quot;validated&quot;);
        selectBox[i].remove();
      }
    }
  };
  
  export { removeThisOption };
  
  </code></pre>
  <h3>Main Product file:</h3>
  <p>Lastly, I want to use the <code>removeThisOption</code> function above in other files, and I've tried to import it like so:</p>
  <pre><code>import { removeThisOption } from &quot;./helpers.js&quot;;
  </code></pre>
  <p>However, I'm still getting the error. The product.js file is enqueuing after the module, and all files are loading correctly. Any ideas where I'm going wrong?</p>