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?

the proble is that I'm not supposed to use CDN links when uploud on market — Павел Шиляев, Sep 28 '17 at 02:03
just shift proper js line before the bootstrap js and tell me — Ashish sah, Sep 28 '17 at 02:06
https://getbootstrap.com/docs/4.0/getting-started/introduction/#quick-start try this out it may help you — Ashish sah, Sep 28 '17 at 02:09
there may can be some error in file or in linking it...and remember adding pooper js before bootstrap js — Ashish sah, Sep 28 '17 at 02:13
If you pay attention to my question, then you will see that I added popper before bootstrap file — Павел Шиляев, Sep 28 '17 at 02:16
Possible duplicate of [How to use popper 1.12.0 with bootstrap 4.0 beta](https://stackoverflow.com/questions/45694811/how-to-use-popper-1-12-0-with-bootstrap-4-0-beta) — Fez Vrasta, Sep 28 '17 at 14:14
I'don't know if it is useful but here there is a solution: https://stackoverflow.com/questions/45694811/how-to-use-popper-js-with-bootstrap-4-beta — Luca95, Aug 26 '18 at 21:03
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. — Casey ScriptFu Pharr, Mar 25 '19 at 02:58

score 294 · Answer 1 · answered Jan 29 '18 at 09:32

294

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.

answered Jan 29 '18 at 09:32

Marc

4,715
3
27
34

6

Thank you. Got rid of the error for me by changing to the umd file. – user1500321 Feb 02 '18 at 05:41
4

Changing the reference to the file under umd folder solved my issue – JGV Feb 23 '18 at 08:32
25

This should have been accepted answer. Awesome. Thanks so much for sharing. – Ajay Kumar Dec 19 '18 at 21:21
1

Awesome for the fast help, thanks. I was wondering what this /umd and /esm folders are but Google does not give good results. – Blackbam Sep 09 '19 at 15:02
Though this sounds like a Thanks, me too answer, Please let me add, @Marc 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. – Paras Parmar May 26 '21 at 13:32

score 106 · Answer 2 · answered Apr 09 '18 at 14:39

106

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>

answered Apr 09 '18 at 14:39

Carol Skelly

351,302
90
710
624

1

The UMD version is the only CDN link that removed the error. – Shomari Jun 05 '18 at 14:08
1

Thanks mate! Your ordering fixed my issue. Cheers! – Noobie Jul 21 '20 at 16:27

score 44 · Accepted Answer · edited Sep 27 '19 at 04:32

44

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.

edited Sep 27 '19 at 04:32

Laura

8,100
4
40
50

answered Sep 28 '17 at 02:38

Phani Kumar M

4,564
1
14
26

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` – Fabrizio Bertoglio Dec 08 '17 at 19:31
2

Although it works, I think this is not the proper way, until BootStrap team updates its own code. – Nadeem Jamali Dec 11 '17 at 13:34
8

The above URL returns a not found error (404). I used https://getbootstrap.com/docs/4.1/assets/js/vendor/popper.min.js for Bootstrap 4.1.3 and this resolved the problem for me. – Mike Strother Sep 14 '18 at 14:54
2

Using the technique suggested in this answer is like chasing a moving target. Right answer is provided by Marc and Zim. – nagu Sep 27 '18 at 16:32
unfortunately this does not work anymore. The error is gone, but the tooltip is the default HTML tooltip – deanwilliammills Nov 24 '19 at 17:46
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. – Freerey Apr 20 '21 at 12:11

score 22 · Answer 4 · answered Feb 20 '19 at 05:22

22

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.

answered Feb 20 '19 at 05:22

webdeveloper086

361
2
3

4

`bootstrap.bundle.min.js` included `popperjs` – vuhung3990 May 31 '19 at 07:57
2

best answer since it doesn't require use of additional Popper.js library at all – R-D Nov 26 '19 at 20:40
BEST ANSWER, THANKS – João Pimentel Ferreira Nov 24 '21 at 22:06

score 12 · Answer 5 · answered Oct 21 '19 at 18:51

12

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.

answered Oct 21 '19 at 18:51

Rob

869
9
11

Using the popper.min.js file located in the UMD directory resolved my issued when installing popper via npm. Thank you! – Lateralus Jan 14 '20 at 04:56

score 6 · Answer 6 · answered Jun 13 '18 at 14:36

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

popper.js in bootstrap 4 gives SyntaxError Unexpected token export

6 Answers6

Dist targets

Linked