SyntaxError: export declarations may only appear at top level of a module

Question

I have recently installed popper.js using the below comment

npm install --save popper.js angular-popper

Then, I add the below in angular.json

"scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/popper.js/dist/popper.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js",
              "src/assets/fancybox/js/jquery.fancybox.min.js"
]

But when I run the application I am getting the error as below in scripts.js,

SyntaxError: export declarations may only appear at top level of a module

So, as per This documentation I tried importing through app.module.ts as well. But no luck.

Polad

Try and import the UMD module? Popper.js/dist/umd – Alexandrina

@Alexandrina I have just tried and cool it is working. What is the difference between popper.js in the root and the one inside the umd? Post this as an answer though. – Polad

Answer 1

Posting answer for future wanderers:

When importing popper.js, use the UMD distribution.

angular.json

scripts:[
    //...
    "node_modules/popper.js/dist/umd/popper.min.js",
    //...
]

The reason for this is because this distribution uses a standardized way of declaring JS libraries, called Universal Module Definition.

More info:

https://github.com/umdjs/umd

Alexandrina

moving forward, is this applicable for all third party modules in angular? – Polad

I am currently dealing with consuming an old library with angular - the scripts import should be used only if you absolutely have to IMO. I much prefer having typed interfaces to work with and doing a per usage import. Then let webpack handle the distribution. That being said - sometimes you just have these dependencies and then a UMD version works just fine. – Alexandrina

Answer 2

is easy to solve, change bootstrap or bootstrap.min into bootstrap.bundle or bootstrap.bundle.min because these files contain popper.js. Popper is what is causing the problem.

Garv