CODEWITHSUNDEEP
angularpopper.js
Anto S
Anto S

Reputation: 2449

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

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.

Upvotes: 6

Views: 4884

Answers (2)

Terrance00
Terrance00

Reputation: 1678

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

Upvotes: 18

Edwin Irausquin
Edwin Irausquin

Reputation: 21

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.

Upvotes: 2

Related Questions