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?

Dichloride

I do not know, bootstrap file requires it – Norty

no I have used bootstrap but it never asked to me – Schramm

last version asked – Norty

well If it is so then I will tell use CDN links – Schramm

the proble is that I'm not supposed to use CDN links when uploud on market – Norty

moreover, I tried it now, but it does not helped – Norty

just shift proper js line before the bootstrap js and tell me – Schramm

still gives the same error – Norty

getbootstrap.com/docs/4.0/getting-started/introduction/… try this out it may help you – Schramm

there may can be some error in file or in linking it...and remember adding pooper js before bootstrap js – Schramm

If you pay attention to my question, then you will see that I added popper before bootstrap file – Norty

Possible duplicate of How to use popper 1.12.0 with bootstrap 4.0 beta – Anu

I'don't know if it is useful but here there is a solution: #45695311 – Exhaust

Yes, latest version requires it. I was fine without it using standard bootstrap types, but then happened when i tried to do bootstrap drop down. – Faina

Answer 1

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.

Distance

yes. You are right. I did copy and paste that code and the error disappears. The CDN does not specify any specific version of popper.js – Mensurable

Although it works, I think this is not the proper way, until BootStrap team updates its own code. – Sivie

The above URL returns a not found error (404). I used getbootstrap.com/docs/4.1/assets/js/vendor/popper.min.js for Bootstrap 4.1.3 and this resolved the problem for me. – Stowell

Using the technique suggested in this answer is like chasing a moving target. Right answer is provided by Marc and Zim. – Boabdil

unfortunately this does not work anymore. The error is gone, but the tooltip is the default HTML tooltip – Dingman

CDN links are often treated like a silver bullet for these kind of things, but oftentimes the answer is that you just need to use a different .js file in the downloaded folder. In this case, it's the UMD version of the folder you need, as Marc and Zim point out. – Zwickau

Answer 2

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.

Beckham

Thank you. Got rid of the error for me by changing to the umd file. – Trinl

Changing the reference to the file under umd folder solved my issue – Pratique

This should have been accepted answer. Awesome. Thanks so much for sharing. – Meatman

Awesome for the fast help, thanks. I was wondering what this /umd and /esm folders are but Google does not give good results. – Turbulent

Though this sounds like a Thanks, me too answer, Please let me add, @Beckham you are a lifesaver. My developers spent a good 3 days with this issue hanging fire on low priority. It got escalated to my care and here we are. Resolved in 3 minutes flat. Let me add, we truly do stand on the shoulders of Giants. – Batty

Answer 3

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>

Kingbolt

The UMD version is the only CDN link that removed the error. – Contemplate

Thanks mate! Your ordering fixed my issue. Cheers! – Frostbite

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.

Rescission

bootstrap.bundle.min.js included popperjs – Goodhen

best answer since it doesn't require use of additional Popper.js library at all – Coffeepot

BEST ANSWER, THANKS – Tomblin

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.

Cy

Using the popper.min.js file located in the UMD directory resolved my issued when installing popper via npm. Thank you! – Hellhole

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

Aret