You can use the HTMLSelectElement.options property of the select element to determine which item you want to select dynamically:
const genderfield = this.template.querySelector('[name="genderfield"]');
genderfield.selectedIndex = [...genderfield.options].findIndex(option => option.value === 'Female');
The default HTMLSelectElement doesn't use "value" to set a value, it uses selectedIndex.
Also, during connectedCallback, the template hasn't yet been rendered. Add an asynchronous callback, and you should be fine:
this.template.querySelector(someCssSelector).selectedIndex = 1
In addition, you cannot reliably use Id values ...
I had a similar error. In my case I had a folder named lwc in the navigation path to the actual location of the of the project. And I had another component at the same level as the correct one.
Once I removed the entire folder of the extra component and updated the lwc folder, I was able to get past this error.