Popper-core: SyntaxError: export declarations may only appear at top level of a module-version 1.12.5- bootstrap v4

Created on 30 Aug 2017 · 6Comments · Source: popperjs/popper-core

Bootstrap v4 with popper.js 1.12.5 not working

Steps to reproduce the problem

create a HTML5 template with the normal syntax
download and attach jquery and bootstrap v4
try to use the new version popper.js 1.12.5.
it gives this error " SyntaxError: export declarations may only appear at top level of a module" in the console.

What went wrong?

bootstrap won't load because it requires the popper.js file. I used the cdn version for version 1.12.5 and it worked https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.5/umd/popper.min.js

Source

danuddara

👍1

Most helpful comment

Popper-utils is not required. But you have to use the UMD build if you do want to import it from HTML like you are doing. This is clearly explained in the README

FezVrasta on 30 Aug 2017

👍14 ❤1

All 6 comments

Please provide more details to reproduce the problem. Otherwise I can't help you

FezVrasta on 30 Aug 2017

https://getbootstrap.com/docs/4.0/getting-started/introduction/

copy the 'starter template' and create a html page.
use the new version of popper.js without using the CDN in the template.

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="js/popper.min.js"></script> <!--download and use the new version-->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
  </body>
</html>

Hope that is enough to reproduce this problem and go to web developer console in firefox. and in there you will see the error. download the new version of popper.js and link it as in the script.

danuddara on 30 Aug 2017

The error from chrome is: _Uncaught SyntaxError: Unexpected token export_
when followed is from this line
export default Popper

Do we need to use transpiler for this? Is there any commonJS solution?

bayangan on 30 Aug 2017

I solved this add 1 more script, popper-utils before popper js. the transpiler is in the utils file. I use UMD version.

bayangan on 30 Aug 2017

Popper-utils is not required. But you have to use the UMD build if you do want to import it from HTML like you are doing. This is clearly explained in the README

FezVrasta on 30 Aug 2017

👍14 ❤1

sorry should have used umd like you said

https://github.com/mcny/mcny.github.io/commit/ef48c902d99ea83e3289b7b44fb91b468302e50c