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:
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?
@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