Браузер не может найти импортированный пакет JavaScript, генерирует ошибку 404 - PullRequest
0 голосов
/ 11 декабря 2018

Я пытаюсь создать веб-страницу, которая импортирует и использует пакет JS, следуя инструкции для LiveChat.Это говорит об импорте с использованием

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

Однако это приводит к этой ошибке:

Uncaught TypeError: Не удалось разрешить спецификатор модуля "@ livechat / agent-приложение-виджет-СДК».Относительные ссылки должны начинаться либо с "/", "./", либо с "../".

. Я подумал, начиная с" / ", это должно быть исправлено, но затем я получаю это:

Не удалось загрузить ресурс: сервер ответил с состоянием 404 (не найдено)

Я пробовал несколько различных способов ссылки на пакет (включая «node_modules» и используя полный путь к основному файлу JS, agentapp-widget.cjs.js).Нет сомнений, что я делаю что-то не так, но я не уверен, что.Файлы в Webstorm:

enter image description here

HTML-файл:

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

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

function addToClaims() {
    
}

function removeFromClaims(element) {
    
}

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

Может кто-нибудь сказать мне, если это проблема конфигурации Webstorm, ошибка в ссылках или что-то еще?

1 Ответ

0 голосов
/ 12 декабря 2018

@livechat/agent-app-widget-sdk библиотека публикуется в формате, подходящем только для использования в экосистеме Node.js;Вы не можете загрузить его в браузер, используя новый ES6 <script type="module">.См. https://salomvary.com/es6-modules-in-browsers.html#using-external-dependencies для получения дополнительной информации об этом

...