Bootstrap4 dependency PopperJs throws error on Angular

user_439130 0
Viewed 43245

I just created a brand new angular-cli project
and ran npm install bootstrap@4.0.0-beta jquery popper.js --save
and changed the .angular-cli.json's related parts as below

  "styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/popper.js/dist/popper.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js"
  ],

however receiving the error below

10:2287 Uncaught SyntaxError: Unexpected token export
    at eval (<anonymous>)
    at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9)
    at Object.../../../../script-loader/index.js!../../../../popper.js/dist/popper.js (popper.js?4b43:1)
    at __webpack_require__ (bootstrap 4403042439558687cdd6:54)
    at Object.2 (scripts.bundle.js:66)
    at __webpack_require__ (bootstrap 4403042439558687cdd6:54)
    at webpackJsonpCallback (bootstrap 4403042439558687cdd6:25)
    at scripts.bundle.js:1

any idea how to fix it?

twitter-bootstrap popper.js angular webpack
6 Answers

I had the same problem. My solution was not to import the dist-folder (./node_modules/popper.js/dist/popper.js) but rather the umd-folder (./node_modules/popper.js/dist/umd/popper.js). Does not matter if you get the mini or normal version of the js-file.

user_40927650

If you work in Asp.net Mvc umd also do the thing.

As in https://stackoverflow.com/a/50839939/8497522 just add in BundleConfig.cs:

bundles.Add(new ScriptBundle("~/bundles/popper").Include("~/Scripts/umd/popper.js"));

except:

bundles.Add(new ScriptBundle("~/bundles/popper").Include("~/Scripts/popper.js"));
user_84975220

To run modal please change the target from "es2015" to "es5" in tsconfig.ts

"styles": [ "src/styles.css", 
            "node_modules/bootstrap/dist/css/bootstrap.min.css" ], 
"scripts": ["node_modules/jquery/dist/jquery.min.js", 
            "node_modules/popper.js/dist/umd/popper.min.js", 
            "node_modules/bootstrap/dist/js/bootstrap.min.js"] 
}
user_113193840

Found hints in answers above :

1)Include popper.js before bootstrap

  1. Update the path to popper.js file. Using /dist/umd instead of /dist

The correct path to popper was in angular-cli.json file was

./node_modules/popper.js/dist/umd/popper.js
user_44594290
Related