popper.js в bootstrap 4 дает SyntaxError Неожиданный экспорт токена

99

Я попытался установить bootstrap 4 и включил следующие ссылки

<script src="libs/jquery/dist/jquery.min.js"></script>
<script src="libs/tether/dist/js/tether.min.js" ></script>
<script src="libs/popper.js/dist/popper.js"></script>
<script src="libs/bootstrap/dist/js/bootstrap.min.js" ></script>

Но возникает следующая ошибка:

Неперехваченный синтаксис Ошибка: неожиданный экспорт токена

введите описание изображения здесь

Есть идеи, как это исправить?

javascript twitter-bootstrap bootstrap-4 popper.js Павел Шиляев
источник
Не знаю, это требует файл начальной загрузки
Павел Шиляев
нет, я использовал бутстрап, но меня никогда не спрашивали
Ashish sah
1
последняя версия
задана
ну, если это так, то я скажу использовать ссылки CDN
Ашиш сах
проблема в том, что я не должен использовать ссылки CDN, когда на рынке много
рекламы

Ответы:

34

Я столкнулся с той же проблемой, если использую popper.js из сети CDN, например cdnjs.

Если вы посмотрите исходный код Bootstrap 4примеров, таких как, например, Navbar, вы увидите, что popper.min.jsон загружается из:

<script src="https://getbootstrap.com/docs/4.1/assets/js/vendor/popper.min.js"></script>

Я включил это в свой проект, и ошибка исчезла. Вы можете скачать исходный код из

https://getbootstrap.com/docs/4.1/assets/js/vendor/popper.min.js

и включите в свой проект как локальный файл, и он должен работать.

Фани Кумар М
источник
да. Ты прав. Я скопировал и вставил этот код, и ошибка исчезла. CDN не указывает конкретную версиюpopper.js
Фабрицио Бертольо
2
Хотя это работает, я думаю, что это неправильный способ, пока команда BootStrap не обновит свой собственный код.
Надим Джамали
8
Приведенный выше URL возвращает ошибку "не найден" (404). Я использовал getbootstrap.com/docs/4.1/assets/js/vendor/popper.min.js для Bootstrap 4.1.3, и это решило проблему для меня.
Майк Стротер,
1
Использование техники, предложенной в этом ответе, похоже на погоню за движущейся целью. Правильный ответ дают Марк и Зим.
nagu
к сожалению, это больше не работает. Ошибка исчезла, но всплывающая подсказка является всплывающей подсказкой HTML по умолчанию
deanwilliammills
243

Просто получил это и понял, почему это действительно происходит. На случай, если сюда пройдут другие:

Проверьте readme.md «Использование». Библиотека доступна в трех версиях для трех разных загрузчиков модулей. Вкратце: если вы загружаете его с <script>тегом, вы должны использовать версию UMD . Вы можете найти его в /dist/umd. По умолчанию (in /dist) - это ESNext (ECMA-Script), который не может быть загружен с помощью scriptтега.

Марк
источник
5
Спасибо. Избавился от ошибки для меня, перейдя в файл umd.
user1500321 02
4
Изменение ссылки на файл в папке
umd
16
Это должен был быть принятый ответ. Потрясающие. Большое спасибо за то, что поделились.
Аджай Кумар
3
Как указано выше, это настоящий ответ.
Рон
1
Замечательно за быструю помощь, спасибо. Мне было интересно, что это за папки / umd и / esm, но Google не дает хороших результатов.
Blackbam
88

Для Bootstrap 4 требуется версия UMD popper.js, и убедитесь, что порядок следующий:

<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="~/Scripts/jquery-3.0.0.min.js"></script>
<script src="~/Scripts/umd/popper.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
Зим
источник
Версия UMD - единственная ссылка CDN, которая устранила ошибку.
нюстерные 05
Спасибо друг! Ваш заказ устранил мою проблему. Ура!
Noobie
17

Вы также можете добавить bootstrap.bundle.min.js и удалить popper.js из своего html.

Связанные файлы JS ( bootstrap.bundle.jsи уменьшенные bootstrap.bundle.min.js) включают [Popper] ( https://popper.js.org/ ), но не jQuery .

webdeveloper086
источник
2
bootstrap.bundle.min.jsвключеныpopperjs
vuhung3990
лучший ответ, так как он вообще не требует использования дополнительной библиотеки
Popper.js
10

Строка 96 в README

Дистанционные цели

Popper.js в настоящее время поставляется с тремя целями: UMD, ESM и ESNext.

  • UMD - Универсальное определение модуля: AMD, RequireJS и глобальные переменные;
  • ESM - модули ES: для webpack / Rollup или браузера, поддерживающего спецификацию;
  • ESNext: доступен в dist/, может использоваться с webpack и babel-preset-env;

Обязательно используйте тот, который вам нужен. Если вы хотите импортировать его с <script>тегом, используйте UMD.

Роб
источник
Использование файла popper.min.js, расположенного в каталоге UMD, разрешило проблему, возникшую при установке popper через npm. Спасибо!
Kickin_Wing
6

У вас есть следующий код в Bundle Config bundles.Add (new ScriptBundle ("~ / bundles / jquery"). Include ("~ / Scripts / jquery- {version} .js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.validate*"));

        // Use the development version of Modernizr to develop with and learn from. Then, when you're
        // ready for production, use the build tool at https://modernizr.com to pick only the tests you need.
        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-*"));

        bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                    "~/Scripts/umd/popper.min.js",
                  "~/Scripts/bootstrap.js",
                  "~/Scripts/respond.js"));

следующий код в макете html

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")

Это сработало для меня

ycs
источник