Почему я получаю SyntaxError: объявления импорта могут появляться только на верхнем уровне модуля при попытке импортировать файл CSS?

Question

Я использую Firefox 75.0. Моя файловая структура выглядит так:

A в верхней части моего индекса. js файл, у меня есть:

import "./styles.css";
import ScrollBooster from "scrollbooster";
// go ahead and change some library source code!
// import ScrollBooster from "../libs/scrollbooster";

Когда я пытаюсь открыть индекс. html, регистрируется сообщение об ошибке: SyntaxError: объявления импорта могут появляться только на верхнем уровне модуля , указывая на импорт CSS. Если я удаляю импорт CSS, он выдает ту же ошибку, на этот раз указывая на ScrollBooster from "scrollbooster";

Почему это происходит?

PS: Вот весь код: https://codesandbox.io/s/scrollbooster-examples-2nn7h?file= / src / index. js

Answer 1

Если у вас возникли проблемы с запуском на локальном компьютере, я бы дважды проверил ваш путь импорта.

По внешнему виду того кода песочницы он импортируется на основе пути, указанного для их веб-сайта. При импорте на локальный компьютер просто убедитесь, что он принимает правильный путь к загруженным файлам.

Точно так же, как импорт ./styles.css основан на рабочей папке вашего проекта. import ScrollBooster from "scrollbooster" может быть проблемой. При наведении указывается module "/sandbox/node_modules/@types/scrollbooster/index" как путь. Попробуйте изменить его на импорт, похожий на стили. css один потенциально.

Я не увидел никаких ошибок, например, Ajay Reddy, когда проверял этот код по ссылке.

Answer 2

Файл HTML является частью пакета npm. Чтобы запустить сервер, вам нужно запустить сервер через npm. Сначала, чтобы установить все зависимости (требуется только один раз), запустите:

npm install

Затем, чтобы запустить сервер, запустите:

npm start

Затем из браузера откройте http://localhost: 1234

Answer 3

Я посмотрел код в песочнице и не вижу проблем с импортом, упомянутых в консоли