title: Browser cannot find imported javascript package, generates error 404
body: <p>I'm trying to build a webpage that imports and uses a JS package, following a <a href="https://developers.livechatinc.com/docs/agent-app-widgets/#developing-your-own-widget" rel="nofollow noreferrer">tutorial</a> for LiveChat. This says to import using </p>
  
  <p><code>import LiveChat from '@livechat/agent-app-widget-sdk';</code></p>
  
  <p>However that results in this error: </p>
  
  <blockquote>
    <p>Uncaught TypeError: Failed to resolve module specifier "@livechat/agent-app-widget-sdk". Relative references must start with either "/", "./", or "../".</p>
  </blockquote>
  
  <p>I thought by starting with a "/" this should be fixed, but then I get this:</p>
  
  <blockquote>
    <p>Failed to load resource: the server responded with a status of 404 (Not Found)</p>
  </blockquote>
  
  <p>I've tried a couple of different ways of referencing the package (including "node_modules" and using the full path to the main JS file, agentapp-widget.cjs.js). There's no doubt I'm doing something wrong, but I'm not sure what. The files in Webstorm: </p>
  
  <p><a href="https://i.stack.imgur.com/f69OM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/f69OM.png" alt="enter image description here"></a></p>
  
  <p>HTML file:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;
      &lt;link rel="stylesheet" href="//cdn.livechatinc.com/boilerplate/1.1.css"&gt;
      &lt;link rel="stylesheet" href="style.css"&gt;
  &lt;/head&gt;
  &lt;br&gt;
  &lt;form class="form"&gt;
      &lt;label class="form__label" for="claimid"&gt;
          &lt;input type="number" style="" class="form__input" id="claimid"&gt;
      &lt;/label&gt;
      &lt;button class="button yellow" type="button" onclick="addToClaims()"&gt;
          &lt;span&gt;Sla op&lt;/span&gt;
      &lt;/button&gt;
  &lt;/form&gt;
  
  &lt;div class="container"&gt;
      &lt;h4&gt;Claim ID's&lt;/h4&gt;
      &lt;div id="claims"&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script type="module" src="main.js"&gt;&lt;/script&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>JS file:
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import LiveChat from '/@livechat/agent-app-widget-sdk';
  
  function addToClaims() {
      
  }
  
  function removeFromClaims(element) {
      
  }
  
  window.onload = function() {
      LiveChat.init();
  };</code></pre>
  </div>
  </div>
  </p>
  
  <p>Can someone tell me if this is a Webstorm configuration issue, a mistake in the referencing or something else?</p>