javascriptwebstormnode-moduleslivechat

Browser cannot find imported javascript package, generates error 404

I'm trying to build a webpage that imports and uses a JS package, following a tutorial for LiveChat. This says to import using

import LiveChat from '@livechat/agent-app-widget-sdk';

However that results in this error:

Uncaught TypeError: Failed to resolve module specifier "@livechat/agent-app-widget-sdk". Relative references must start with either "/", "./", or "../".

I thought by starting with a "/" this should be fixed, but then I get this:

Failed to load resource: the server responded with a status of 404 (Not Found)

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:

enter image description here

HTML file:

<head>
    <link rel="stylesheet" href="//cdn.livechatinc.com/boilerplate/1.1.css">
    <link rel="stylesheet" href="style.css">
</head>
<br>
<form class="form">
    <label class="form__label" for="claimid">
        <input type="number" style="" class="form__input" id="claimid">
    </label>
    <button class="button yellow" type="button" onclick="addToClaims()">
        <span>Sla op</span>
    </button>
</form>

<div class="container">
    <h4>Claim ID's</h4>
    <div id="claims">

    </div>
</div>

<script type="module" src="main.js"></script>
</body>

JS file: 

import LiveChat from '/@livechat/agent-app-widget-sdk';

function addToClaims() {
    
}

function removeFromClaims(element) {
    
}

window.onload = function() {
    LiveChat.init();
};

Can someone tell me if this is a Webstorm configuration issue, a mistake in the referencing or something else?

Solution

  • @livechat/agent-app-widget-sdk library is published in format only suitable for being used in Node.js ecosystem; you can't load it in browser using the new ES6 <script type="module">. See https://salomvary.com/es6-modules-in-browsers.html#using-external-dependencies for more info on this