3

I'm building a website that only needs Bootstrap 4's collapse.js and dropdown.js so I can use it's Navbar component.

I don't want to use the entire Bootstrap file.

So I downloaded Bootstrap's source code and dropped bootstrap-4.3.1⁩ ▸ ⁨js⁩ ▸ ⁨src⁩ ▸ ⁨util.js, bootstrap-4.3.1⁩ ▸ ⁨js⁩ ▸ ⁨src⁩ ▸ ⁨collapse.js and bootstrap-4.3.1⁩ ▸ ⁨js⁩ ▸ ⁨src⁩ ▸ ⁨dropdown.js into my project.

Then linked them up from my page:

    ...
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="js/util.js"></script>
    <script src="js/collapse.js"></script>
    <script src="js/dropdown.js"></script>
  </body>
</html>

However, when I refresh the page to test the navbar, I get this error in my console:

Uncaught SyntaxError: Unexpected identifier     util.js:8
Uncaught SyntaxError: Unexpected identifier     collapse.js:8
Uncaught SyntaxError: Unexpected identifier     dropdown.js:8

And of course nothing happens when I try clicking on a dropdown menu item. Any suggestions (that doesn't involve node)?

Larry Azevedo
  • 31
  • 3
  • The final bootstrap file is compiled from all these source files; you can't just use them individually. You have to download the entire source code, change the respective files, then build the final file. –  Aug 05 '19 at 21:29
  • look in the source for either of the two files, you'll notice they depend on util.js – Eric King Aug 05 '19 at 23:05

1 Answers1

2

You are importing wrong files. You have to import compiled version of those.

Those files are in the bootstrap-4.3.1⁩ ▸ ⁨js⁩ ▸ dist.

zmag
  • 7,825
  • 12
  • 32
  • 42