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

Я попытался установить 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>

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

Uncaught syntaxError: Неожиданный экспорт токенов

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

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

ОТВЕТЫ

Ответ 1

Я столкнулся с той же проблемой, если использую 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

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

Ответ 2

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

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

Ответ 3

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>

Ответ 4

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

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

Ответ 5

У вас есть следующий код в 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")

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

Ответ 6

Строка 96 в README

Dist цели

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

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

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