Popper.js in bootstrap 4 gives SyntaxError Unexpected token export

Question

I tried installing bootstrap 4 and included the following links

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

But the following error occurs:

Uncaught syntaxError: Unexpected token export

Any ideas how to fix this?

Answer 1

I ran into the same problem if I use popper.js from a CDN network like cdnjs .

If you observe the source code for Bootstrap 4 examples, such as Navbar , you can see popper.min.js loading from:

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

I included this in my project and the error went away. You can download the source code from

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

and include in your project as a local file, and it should work.

Answer 2

Just realized this and understood why this is happening. In case others go here:

Check readme.md "Usage". The library is available in three versions for three differential module loaders. In short: if you load it with the <script> , you must use the UMD version. You can find it in /dist/umd . By default (in /dist ), ESNext (ECMA-Script) is used, which cannot be loaded using the script tag.

Answer 3

Bootstrap 4 requires an UMD version of popper.js and make sure the order is as follows:

 <!-- 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> 

Answer 4

You can also add bootstrap.bundle.min.js and remove popper.js in your HTML.

Associated JS files ( bootstrap.bundle.js and minimized bootstrap.bundle.min.js ) include [Popper] ( https://popper.js.org/ ), but not jQuery .

Answer 5

You have the following code in 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")); 

following code in HTML layout

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

It worked for me

Answer 6

Line 96 in README

Dist goals

Popper.js currently comes with 3 goals: UMD, ESM, and ESNext.

• UMD - definition of a universal module: AMD, RequireJS and global variables;
• ESM - ES modules: for web packages / rollup packages or browsers that support specifications;
• ESNext: available in dist/ , can be used with webpack and babel-preset-env ;

Make sure you use the one you need. If you want to import it with the <script> , use UMD.