Uncaught TypeError: Cannot read property 'setAttribute' of undefined at Object.onLoad
We ran into the same error with the following html:
<select class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" role="button" v-model="selected" aria-haspopup="true" aria-expanded="false"> <option disabled value="">Please select one</option> <option class="dropdown-item" value="type1">Carrier</option> <option class="dropdown-item" value="type2">Shipper</option></select>We tried removing data-toggle="dropdown" from the <select> tag; the error no longer occurred, and the dropdown menu still functioned. Not sure why this works, but it got rid of the error for us. Must be a conflict somehow? Anyways, if someone else is looking for a solution, this workaround may work for them.
I got this same error in Bootstrap 4.x because my dropdown menu did not have the same parent as the dropdown button I was using.
<span class="project-sort-by">Sort by: <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Recent</a></span><div class="dropdown-menu" aria-labelledby="dropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a></div>This does not work because the dropdown.js code looks for the menu using this code:
_getMenuElement() { if (!this._menu) { const parent = Dropdown._getParentFromElement(this._element) if (parent) { this._menu = parent.querySelector(SELECTOR_MENU) } } return this._menu }To fix this, move the menu so it has the same parent as the toggle.
<span class="project-sort-by">Sort by: <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Recent</a> <div class="dropdown-menu" aria-labelledby="dropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div></span>
CSS Frameworks
First of all you have to choose whether you're using Bootstrap 4 or Semantic-UI, because these are two different CSS Frameworks and using both of them is a mess.
Bootstrap 4
Assuming you choose Bootstrap 4 as it's simpler and easier to learn especially for the beginners (but of course you can choose Semantic-UI, Foundation or any other if you'd like) you should have these two scripts inside your code: jQuery and Popper.js.
From Bootstraps Documentation:
Many of our components require the use of JavaScript to function. Specifically, they require jQuery, Popper.js, and our own JavaScript plugins.
Dropdown
Again, as you can find in docs:
Dropdowns are built on a third party library, Popper.js, which provides dynamic positioning and viewport detection. Be sure to include popper.min.js before Bootstrap’s JavaScript or use bootstrap.bundle.min.js / bootstrap.bundle.js which contains Popper.js. Popper.js isn’t used to position dropdowns in navbars though as dynamic positioning isn’t required.
When you decide which CSS Framework you'd like to use you'll be able to set your Dropdowns in a proper way. Just to have better point of view you should also look into Semantic-UI Documentation about Dropdown.
NodeJS Environment != Browser JavaScript Environment
As I can see you install your scripts through npm, but I'm now sure if it is intended by you. In shorthand:
npm is a package manager for Node.js packages
I'm guessing that what you're trying to do is to have simple versions of these packages just in your local folders like ./project_name/javascript/bootstrap.js or ./project_name/css/bootstrap.min.css and there's no need for you right now to have node_modules. But, again, of course you can have it like this if you'd like.
You can find a lot of useful comments about Node and JavaScript here.