引导程序4中的popper.js提供了SyntaxError意外的令牌导出

98

我尝试安装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>

但是发生以下错误：

语法错误：意外的令牌导出

任何想法如何解决？

— ПавелШиляев
source

我不知道，引导文件需要它

— ПавелШиляев

不，我没有使用过引导程序，但是它从未问过我

— Ashish sah

1

最后一个版本问

— ПавелШиляев

好吧，如果是这样，那么我将告诉您使用CDN链接

— Ashish sah

该proble是，我不应该使用CDN链接时uploud市场

— ПавелШиляев

33

如果我使用CDN网络中的popper.js之类的，就会遇到相同的问题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

并将其作为本地文件包含在您的项目中，它应该可以工作。

— 帕尼·库玛（Pani Kumar M）
source

是。你是对的。我确实复制并粘贴了该代码，错误消失了。CDN没有指定popper.js

— Fabrizio Bertoglio的

2

尽管它可以工作，但我认为这不是正确的方法，除非BootStrap团队更新其自己的代码。

— Nadeem Jamali

8

上面的URL返回未找到的错误（404）。我为Bootstrap 4.1.3使用了getbootstrap.com/docs/4.1/assets/js/vendor/popper.min.js，这为我解决了这个问题。

— Mike Strother

1

使用此答案中建议的技术就像追逐移动目标。Marc和Zim提供了正确的答案。

— nagu

不幸的是，这不再起作用。错误消失了，但是工具提示是默认的HTML工具提示

— deanwilliammills19年

241

刚得到这个，并弄清楚为什么它真的发生了。如果其他人到这里来：

检查readme.md“用法”。该库提供了三个版本，可用于三个不同的模块加载器。简而言之：如果使用<script>标签加载它，则必须使用UMD版本。您可以在中找到它/dist/umd。默认值（以表示/dist）是ESNext（ECMA脚本），无法使用script标记加载。

— 马克
source

5

谢谢。通过更改为umd文件，为我摆脱了错误。

— user1500321 '18

4

更改对umd文件夹下文件的引用解决了我的问题

— Vimalan Jaya Ganesh

16

这应该已经被接受。太棒了非常感谢分享。

— 阿杰·库玛

3

上面是真正的答案。

— 罗恩

1

很棒的快速帮助，谢谢。我想知道这个/ umd和/ esm文件夹是什么，但是Google没有给出好的结果。

— Blackbam

87

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>

— 齐姆
source

UMD版本是唯一消除该错误的CDN链接。

— nyusternie

谢了哥们！您的订购解决了我的问题。干杯!

— Noobie

17

您还可以在HTML中添加bootstrap.bundle.min.js并删除popper.js。

捆绑的JS文件（bootstrap.bundle.js并最小化bootstrap.bundle.min.js）包括[Popper]（https://popper.js.org/），但不包括jQuery。

— webdeveloper086
source

2

bootstrap.bundle.min.js包括popperjs

— vuhung3990 '19

最佳答案，因为它根本不需要使用其他Popper.js库

— BuddyZ

10

自述文件中的第96行

距离目标

Popper.js当前附带三个目标：UMD，ESM和ESNext。

UMD-通用模块定义：AMD，RequireJS和全局变量；
ESM-ES模块：适用于支持该规范的webpack / Rollup或浏览器；
ESNext：提供dist/，可与webpack和babel-preset-env;一起使用。

确保使用适合您需求的产品。如果要<script>使用标签导入，请使用UMD。

— 抢
source

使用位于UMD目录中的popper.min.js文件解决了通过npm安装popper时发出的问题。谢谢！

— 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
source