popper.js in bootstrap 4 gives SyntaxError Unexpected token export

Question

I tried install bootstrap 4, and included 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 it?

Answer 1

Just got this too and figured why it really happens. In case others get by here:

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

Answer 2

Bootstrap 4 requires the 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 3

I encountered the same issue if I use popper.js from CDN network like cdnjs.

If you observe the source code of Bootstrap 4 examples like for example Navbar you can see that popper.min.js is loaded from:

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

I included that in my project and the error is gone. 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 4

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

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

Answer 5

Line 96 in README

Dist targets

Popper.js is currently shipped with 3 targets in mind: UMD, ESM and ESNext.

• UMD - Universal Module Definition: AMD, RequireJS and globals;
• ESM - ES Modules: For webpack/Rollup or browser supporting the spec;
• ESNext: Available in dist/, can be used with webpack and babel-preset-env;

Make sure to use the right one for your needs. If you want to import it with a <script> tag, use UMD.

Answer 6

You have 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 layout html

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

This worked for me