Проблемы с import в JS

Question

Делаю векторный редактор схем и диаграмм с использованием JointJS. Изначально у меня все функции были в одном файле. Все работало. Разделил все по классам. Но возникла проблема с импортами:

Uncaught SyntaxError: import declarations may only appear at top level of a module

Если делаю тип "модуль" у index.js, то выходят такие ошибки:

GET http://127.0.0.1:5500/classes/AbstractDiagram

GET http://127.0.0.1:5500/classes/FileManager

GET http://127.0.0.1:5500/classes/ElementConstructor

GET http://127.0.0.1:5500/classes/ToolbarController

GET http://127.0.0.1:5500/classes/MainCanvas

GET http://127.0.0.1:5500/classes/SmallCanvas

Загрузка модуля по адресу «http://127.0.0.1:5500/classes/AbstractDiagram» была заблокирована из-за неразрешенного MIME-типа («text/html»). index.html Загрузка модуля по адресу «http://127.0.0.1:5500/classes/FileManager» была заблокирована из-за неразрешенного MIME-типа («text/html»). index.html Загрузка модуля по адресу «http://127.0.0.1:5500/classes/ElementConstructor» была заблокирована из-за неразрешенного MIME-типа («text/html»). index.html Загрузка модуля по адресу «http://127.0.0.1:5500/classes/ToolbarController» была заблокирована из-за неразрешенного MIME-типа («text/html»). index.html Загрузка модуля по адресу «http://127.0.0.1:5500/classes/MainCanvas» была заблокирована из-за неразрешенного MIME-типа («text/html»). index.html Загрузка модуля по адресу «http://127.0.0.1:5500/classes/SmallCanvas» была заблокирована из-за неразрешенного MIME-типа («text/html»). index.html Загрузка модуля по адресу «http://127.0.0.1:5500/classes/AbstractDiagram» не удалась. index.html:407:48 Загрузка модуля по адресу «http://127.0.0.1:5500/classes/FileManager» не удалась. index.html:407:48 Загрузка модуля по адресу «http://127.0.0.1:5500/classes/ElementConstructor» не удалась. index.html:407:48 Загрузка модуля по адресу «http://127.0.0.1:5500/classes/ToolbarController» не удалась. index.html:407:48 Загрузка модуля по адресу «http://127.0.0.1:5500/classes/MainCanvas» не удалась. index.html:407:48 Загрузка модуля по адресу «http://127.0.0.1:5500/classes/SmallCanvas» не удалась.

Как решить данную проблему?

import AbstractDiagram from "../classes/AbstractDiagram";
import FileManager from "../classes/FileManager";
import ElementConstructor from "../classes/ElementConstructor";
import ToolbarController from "../classes/ToolbarController";
import MainCanvas from "../classes/MainCanvas";
import SmallCanvas from "../classes/SmallCanvas";

var canvas = document.getElementById('canvas');
var radar = document.getElementById('radar');
var mainCanvas = new MainCanvas(canvas);
var smallCanvas = new SmallCanvas(radar);
var diagram = new AbstractDiagram();
diagram.initializeKeyboardShortcuts();
var toolbarController = new ToolbarController();
var elementConstructor = new ElementConstructor();
toolbarController.initializeToolbar();


const sidebarLinks = document.querySelectorAll("#sidebar .geItem");
// Проходимся по каждой ссылке и добавляем прослушиватель событий
sidebarLinks.forEach(sidebarLink => {
  sidebarLink.addEventListener("click", function() {
    // Здесь можно выполнить нужные действия при клике на ссылку
    // Например, можно получить значение атрибута data-shape
    const shape = this.getAttribute("data-shape");
    elementConstructor.createElement(shape);
    console.log("Clicked on shape:", shape);
  });
});

<div class="geHeaderContainer">
  <div class="geMenubarContainer">
    <a class="geIcon"></a>
    <div class="geTextDiv">
      <a id="title" class="geItem"></a>
    </div>
    <img src="../icons/header.png">

    <div class="geMenubar">
      <a class="geItem">Файл
                        <div id="file" class="geDropdown">
                            <div class="geDropdownItem" id="open-option">Открыть</div>
                            <div class="geDropdownItem" id="save-option">Сохранить</div>
                            <div class="geDropdownItem" id="exit-option">Выход</div>
                        </div>
                    </a>
      <a class="geItem">Правка
                        <div class="geDropdown">
                            <div id="undo" class="geDropdownItem">Отменить</div>
                            <div id="redo" class="geDropdownItem">Повторить</div>
                            <div id="cut" class="geDropdownItem">Вырезать</div>
                            <div id="copy" class="geDropdownItem">Копировать</div>
                            <div id="paste" class="geDropdownItem">Вставить</div>
                            <div id="delete" class="geDropdownItem">Удалить</div>
                        </div>
                    </a>
      <a class="geItem">Вид
                        <div class="geDropdown">
                            <div id="zoom" class="geDropdownItem">Увеличить</div>
                            <div id="zoom out" class="geDropdownItem">Уменьшить</div>
                        </div>
                    </a>
      <a class="geItem">Положение
                        <div class="geDropdown">
                            <div class="geDropdownItem">Вверх</div>
                            <div class="geDropdownItem">Вниз</div>
                            <div class="geDropdownItem">Влево</div>
                            <div class="geDropdownItem">Вправо</div>
                        </div>
                    </a>
      <a class="geItem">Дополнительно
                        <div class="geDropdown">
                            <div class="geDropdownItem">Настройки</div>
                            <div class="geDropdownItem">Справка</div>
                        </div>
                    </a>
      <a class="geItem">Помощь
                        <div class="geDropdown">
                            <div class="geDropdownItem">О программе</div>
                            <div class="geDropdownItem">Поддержка</div>
                        </div>
                    </a>
    </div>
  </div>
  <div class="geToolbarContainer">
    <div class="geToolbar">

      <a id="zoom-scale" class="geLabel" title="Масштаб (Alt+Mousewheel)">
                        100%
                        <img src="../icons/arrow.gif">
                        <div id="scale-dropdown">
                            <a class="scale-option" data-scale="0.25">25%</a>
      <a class="scale-option" data-scale="0.5">50%</a>
      <a class="scale-option" data-scale="0.75">75%</a>
      <a class="scale-option" data-scale="1">100%</a>
      <a class="scale-option" data-scale="1.25">125%</a>
      <a class="scale-option" data-scale="1.5">150%</a>
      <a class="scale-option" data-scale="1.75">175%</a>
    </div>
    </a>

    <div class="geSeparator"></div>
    <a id="zoom-button" class="geLabel" title="Увеличить">
      <img src="../icons/glass1.png"></img>
    </a>
    <a id="unzoom-button" class="geLabel" title="Уменьшить">
      <img src="../icons/glass2.png"></img>
    </a>
    <div class="geSeparator"></div>
    <a id='undo-button' class="geLabel" title="Отменить (Ctrl+Z)">
      <img src="../icons/undo.png"></img>
    </a>
    <a id='redo-button' class="geLabel" title="Вернуть (Ctrl+Y)">
      <img src="../icons/revert.png"></img>
    </a>
    <div class="geSeparator"></div>
    <a id='delete-button' class="geLabel" title="Удалить (Delete)">
      <img src="../icons/delete.png"></img>
    </a>
    <div class="geSeparator"></div>

    <input type="color" id="color-pick-input" title="Цвет сетки" value="#ffffff">
    <input type="range" id="line-width-input" title="Размер сетки" min="1" max="100" value="20">
    <span id="range-value"></span>
    <a id="textBox" class="geLabel" title="Добавить текст">
      <img src="../icons/text.png"></img>
    </a>
    <div class="geSeparator"></div>
    <a id="clear-button" class="geLabel" title="очистить">
      <img src="../icons/clear.png"></img>
    </a>
    <a id="save-button" class="geLabel" title="сохранить">
      <img src="../icons/save.png"></img>
    </a>
    <a id="open-button" class="geLabel" title="открыть">
      <img src="../icons/open.png"></img>
    </a>
    <div class="geSeparator"></div>
    <select id="line-connection-type">
      <option value="">Тип соединения</option>
      <option value="manhattan">Manhattan</option>
      <option value="metro">Metro</option>
      <option value="normal">Normal</option>
      <option value="orthogonal">Orthogonal</option>
      <option value="rightAngle">Orthogonal Router with Given Direction (Right Angle)</option>
    </select>
    <select id="saveSelect">
      <option value="">Сохранить как</option>
      <option value="json">JSON</option>
      <option value="svg">SVG</option>
      <option value="png">PNG</option>
      <option value="jpg">JPG</option>
    </select>
  </div>

</div>
</div>


<div id="sidebar">
  <img id="btn-toggle-menu" src="../icons/next.png"></img>
  <h3>Фигуры</h3>

  <a class="geTitle">Избранное</a>
  <a class="geTitle">Общие
            </a>
  <div class="geSidebar">

    <a class="geItem" title="прямая линия" data-shape="line">
      <img src="../mainFigures/line.png"></img>
    </a>
    <a class="geItem" title="прямоугольник" data-shape="rectangle">
      <img src="../mainFigures/rectangle.png"></img>
    </a>
    <a class="geItem" title="закругленный прямоугольник" data-shape="rounded-rectangle">
      <img src="../mainFigures/rounded-rectangle.png"></img>
    </a>
    <a class="geItem" title="круг" data-shape="circle">
      <img src="../mainFigures/circle.png"></img>
    </a>
    <a class="geItem" title="эллипс" data-shape="ellipse">
      <img src="../mainFigures/ellipse.png"></img>
    </a>
    <a class="geItem" title="треугольник" data-shape="triangle">
      <img src="../mainFigures/triangle.png"></img>
    </a>
    <a class="geItem" title="трапеция" data-shape="trapezium">
      <img src="../mainFigures/trapezium.png"></img>
    </a>
    <a class="geItem" title="комментарий" data-shape="90trapezium">
      <img src="../mainFigures/90trapezium.png"></img>
    </a>
    <a class="geItem" title="ромб" data-shape="rhomb">
      <img src="../mainFigures/rhomb.png"></img>
    </a>
    <a class="geItem" title="параллелограмм" data-shape="parallelogram">
      <img src="../mainFigures/parallelogram.png"></img>
    </a>
    <a class="geItem" title="пятиугольник" data-shape="pentagon">
      <img src="../mainFigures/pentagon.png"></img>
    </a>
    <a class="geItem" title="шестиугольник" data-shape="hexagon">
      <img src="../mainFigures/hexagon.png"></img>
    </a>
    <a class="geItem" title="цилиндр" data-shape="cylinder">
      <img src="../mainFigures/cylinder.png"></img>
    </a>
    <a class="geItem" title="односторонняя стрелка" data-shape="arrow">
      <img src="../mainFigures/arrows.png"></img>
    </a>
    <a class="geItem" title="двусторонняя стрелка" data-shape="double-arrow">
      <img src="../mainFigures/double-arrow.png"></img>
    </a>
    <a class="geItem" title="криволинейная стрелка" data-shape="curved-arrow">
      <img src="../mainFigures/curve-arrow.png"></img>
    </a>
    <a class="geItem" title="изображение" data-shape="image">
      <img src="/icons/image-icon1.svg"></img>
    </a>
  </div>
  <a class="geTitle">Блок-схема</a>
  <div class="geSidebar">
    <a class="geItem" title="процесс" data-shape="process">
      <img src="../mainFigures/rectangle.png"></img>
    </a>
    <a class="geItem" title="альтернативный процесс" data-shape="alternative process">
      <img src="../block diagram/alternative process.png"></img>
    </a>
    <a class="geItem" title="решение/условие" data-shape="decision/condition">
      <img src="../mainFigures/rhomb.png"></img>
    </a>
    <a class="geItem" title="вход/выход" data-shape="inOutput">
      <img src="../mainFigures/parallelogram.png"></img>
    </a>
    <a class="geItem" title="определенный процесс" data-shape="predefined process">
      <img src="../block diagram/predefined process.png"></img>
    </a>
    <a class="geItem" title="эллипс" data-shape="internal storage">
      <img src="../block diagram/internal data.png"></img>
    </a>
    <a class="geItem" title="документ" data-shape="document">
      <img src="../block diagram/document.png"></img>
    </a>
    <a class="geItem" title="мульти-документ" data-shape="multi-document">
      <img src="../block diagram/multi-document.png"></img>
    </a>
    <a class="geItem" title="начало/конец" data-shape="start/end">
      <img src="../mainFigures/rounded-rectangle.png"></img>
    </a>
    <a class="geItem" title="подготовка" data-shape="preparation">
      <img src="../block diagram/preparation.png"></img>
    </a>
    <a class="geItem" title="сортировка" data-shape="sort">
      <img src="../block diagram/sort.png"></img>
    </a>
    <a class="geItem" title="ручной ввод" data-shape="manual input">
      <img src="../block diagram/manual input.png"></img>
    </a>
    <a class="geItem" title="ручная операция" data-shape="manual operation">
      <img src="../block diagram/manual operation.png"></img>
    </a>
    <a class="geItem" title="узел" data-shape="node">
      <img src="../mainFigures/circle.png"></img>
    </a>
    <a class="geItem" title="ссылка" data-shape="link">
      <img src="../block diagram/link.png"></img>
    </a>
    <a class="geItem" title="карточка" data-shape="card">
      <img src="../block diagram/card.png"></img>
    </a>
    <a class="geItem" title="перфолента" data-shape="tape">
      <img src="../block diagram/tape.png"></img>
    </a>
    <a class="geItem" title="узел суммирования" data-shape="summing junction">
      <img src="../block diagram/summing junction.png"></img>
    </a>
    <a class="geItem" title="узел или" data-shape="or">
      <img src="../block diagram/or.png"></img>
    </a>
    <a class="geItem" title="сопоставление" data-shape="collate">
      <img src="../block diagram/collate.png"></img>
    </a>
    <a class="geItem" title="извлечение" data-shape="exctract/measurement">
      <img src="../mainFigures/triangle.png"></img>
    </a>
    <a class="geItem" title="объединение" data-shape="merge/storage">
      <img src="../mainFigures/triangle.png" style="transform: rotate(180deg);"></img>
    </a>
    <a class="geItem" title="сохраненные данные" data-shape="stored data">
      <img src="../block diagram/stored data.png"></img>
    </a>
    <a class="geItem" title="память с последовательным доступом" data-shape="sequantional data">
      <img src="../block diagram/sequantional data.png"></img>
    </a>
    <a class="geItem" title="база данных" data-shape="database">
      <img src="../block diagram/database.png"></img>
    </a>
    <a class="geItem" title="память с прямым доступом" data-shape="direct data">
      <img src="../block diagram/direct data.png"></img>
    </a>
    <a class="geItem" title="дисплей" data-shape="display">
      <img src="../block diagram/display.png"></img>
    </a>
    <a class="geItem" title="annotation1" data-shape="annotation1">
      <img src="../block diagram/annotation1.png"></img>
    </a>
    <a class="geItem" title="комментарий2" data-shape="annotation2">
      <img src="../block diagram/annotation2.png"></img>
    </a>
  </div>
  <a class="geTitle">UML</a>
  <div class="geSidebar">

    <a class="geItem" title="класс" data-shape="class">
      <img src="../mainFigures/line.png"></img>
    </a>
    <a class="geItem" title="интерфейс" data-shape="interface">
      <img src="../mainFigures/rectangle.png"></img>
    </a>
    <a class="geItem" title="обьект" data-shape="rounded-rectangle">
      <img src="../mainFigures/rounded-rectangle.png"></img>
    </a>
    <a class="geItem" title="круг" data-shape="circle">
      <img src="../mainFigures/circle.png"></img>
    </a>
    <a class="geItem" title="эллипс" data-shape="ellipse">
      <img src="../mainFigures/ellipse.png"></img>
    </a>
    <a class="geItem" title="треугольник" data-shape="triangle">
      <img src="../mainFigures/triangle.png"></img>
    </a>
    <a class="geItem" title="трапеция" data-shape="trapezium">
      <img src="../mainFigures/trapezium.png"></img>
    </a>
    <a class="geItem" title="комментарий" data-shape="90trapezium">
      <img src="../mainFigures/90trapezium.png"></img>
    </a>
    <a class="geItem" title="ромб" data-shape="rhomb">
      <img src="../mainFigures/rhomb.png"></img>
    </a>
    <a class="geItem" title="параллелограмм" data-shape="parallelogram">
      <img src="../mainFigures/parallelogram.png"></img>
    </a>
    <a class="geItem" title="пятиугольник" data-shape="pentagon">
      <img src="../mainFigures/pentagon.png"></img>
    </a>
    <a class="geItem" title="шестиугольник" data-shape="hexagon">
      <img src="../mainFigures/hexagon.png"></img>
    </a>
    <a class="geItem" title="цилиндр" data-shape="cylinder">
      <img src="../mainFigures/cylinder.png"></img>
    </a>

    <a class="geItem" title="односторонняя стрелка" data-shape="arrow">
      <img src="../mainFigures/arrows.png"></img>
    </a>
    <a class="geItem" title="двусторонняя стрелка" data-shape="double-arrow">
      <img src="../mainFigures/double-arrow.png"></img>
    </a>
    <a class="geItem" title="криволинейная стрелка" data-shape="curved-arrow">
      <img src="../mainFigures/curve-arrow.png"></img>
    </a>
  </div>
</div>
<div id="diagram-container">
  <div id="canvas">
  </div>
  <div id="radar">
  </div>
</div>


<div id="properties-panel">
  <h2>Стили элемента</h2>
  <label for="stroke-color">Цвет контура:</label>
  <input type="color" id="stroke-color"><br>

  <label for="fill-color">Цвет заливки:</label>
  <input type="color" id="fill-color"><br>

  <label for="line-width">Толщина линии:</label>
  <input type="number" id="line-width" min="1" max="10" value="1"><br>
  <label for="width">Длина:</label>
  <input type="number" id="width" min="1" max="1000"><br>
  <label for="height">Ширина:</label>
  <input type="number" id="height" min="1" max="1000"><br>

  <label for="line-style">Тип линии:</label>
  <select id="line-style">
    <option value="solid">Сплошная</option>
    <option value="dashed">Пунктирная</option>
    <option value="dotted">Точечная</option>
  </select><br>

  <label for="text-content">Текст:</label>
  <input type="text" id="text-content"><br>

  <label for="text-size">Размер текста:</label>
  <input type="number" id="text-size" min="8" max="24" value="12"><br>

  <label for="text-font">Шрифт текста:</label>
  <select id="text-font">
    <option value="Arial">Arial</option>
    <option value="Helvetica">Helvetica</option>
    <option value="Times New Roman">Times New Roman</option>
    <!-- Добавьте другие варианты шрифтов по вашему усмотрению -->
  </select><br>

  <label for="text-weight">Жирность текста:</label>
  <select id="text-weight">
    <option value="normal">Обычный</option>
    <option value="bold">Жирный</option>
  </select><br>

  <button id="apply-styles">Применить стили</button>
</div>

<script src="../node_modules/@joint/plus/joint-plus.js"></script>

<script type="module" src="../js/index.js"></script>
<script src="../js/script.js"></script>

Answer 1

Посмотри как ты импортируешь script в index.js, попробуй там поставить type=module.Может браузер не поддериживает импорты es6

БЛОГ НА HUSL

Проблемы с import в JS

Ответы (1 шт):