0

my console show me this error , it's about popper js . this is the error , and i think because of that my toggle button is not working

scripts.js:7 Uncaught SyntaxError: Unexpected token 'export'

export default Popper;

and this is my html file and scripts

<div class="container">
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" routerLink="home">Home</a>
        </li>
        <li class="nav-item active" *ngIf="!isUser">
            <a class="nav-link" routerLink="login">Login</a>
          </li>
          <li class="nav-item active" *ngIf="!isUser">
            <a class="nav-link" routerLink="register">Register</a>
          </li>
          <li class="nav-item active" *ngIf="isUser">
            <a class="nav-link" routerLink="profil">Profil</a>
          </li>
          <li class="nav-item active" *ngIf="isUser">
            <a class="nav-link" routerLink="products">Products</a>
          </li>
          <li class="nav-item active" *ngIf="isUser">
            <a class="nav-link" routerLink="myproducts">My Products</a>
          </li>
          <li class="nav-item active" *ngIf="isUser">
            <a class="btn btn-danger" (click)="logout()">Logout</a>
          </li>
      </ul>

    </div>
  </nav>

</div>


   "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/popper.js/dist/popper.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]
          },

 <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
Yass Ess
  • 33
  • 1
  • 8
  • https://stackoverflow.com/questions/46459767/popper-js-in-bootstrap-4-gives-syntaxerror-unexpected-token-export – Tonnio Nov 10 '21 at 20:54
  • can i use this 20 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] – Yass Ess Nov 10 '21 at 21:48

1 Answers1

1

You should use the umd version of the script because it's browser compatible. In the scripts, array try to replace:

"node_modules/popper.js/dist/popper.min.js"

with:

"node_modules/popper.js/dist/umd/popper.min.js"

Tonnio
  • 574
  • 2
  • 9
  • "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" ] and still not working :/ – Yass Ess Nov 10 '21 at 21:47