🐛 Bug - TypeError: e(...).stop is not a function...

[lovkyndig]

@google-translate-select bug report

Summary

Environment

The issu is located in two environments:

• My local windows-mashine in dev.
• My published site on Vercel

Steps to reproduce

1. Create a nuxt3-starter-repo
2. Create a component for GoogleTranslate. Link to my component on github.
3. Create two nav-components, one for the top and one for the bottom.
4. Load both in the same window or only bottom-nav in mobil etc.
5. Load both of the nav-components on the same time (maybe this creates the error?).
6. Load GoogleTranslate-component in both of the nav-components.
7. Add a class to the element in bottom-nav with have the classname google-translate-select-dropdown__menu

// Example css-code
.drop-up-btn {
  top:-1000% !important;
  bottom: 100%
} 
// This is my very simple solution to make a popup.

8. Add a script to add the drop-up-btn-class to the element.

// Example of javascript who also is acecpted as typescript
onMounted(() => {
  changeLanguage.count = 0 // debugging-tool
  function changeLanguage () {
    console.log('ChangeLanguage starting ... DropUpBtn clicked ' + changeLanguage.count)
    const dropUpBtn = document.getElementsByClassName('google-translate-select-dropdown__menu')[1]
    dropUpBtn.classList.add('drop-up-btn')
    changeLanguage.count = +1
  }
  const parentEl = document.getElementsByClassName('google-translate-select-dropdown__activator')[1]
  parentEl.setAttribute('id', 'dropUpBtn') // debugging-tool
  parentEl.addEventListener('click', changeLanguage)
})
console.log('FooterNav.vue finish loading.')

Comment

I will try to load only one of the nav-components at a time, to check if the error disappear.

Posting the result later in this week.

If someone will reproduce the error it is possibly to use this simple starter-kit and insert the GoogleTranslate-component to places on the index-page (instead of making two nav-components).

The error will show up only on click on the first select-button.

[lovkyndig]

Well, The TypeError: e(...).stop-error disapear when I added breakpoints, but the problem got worse.

The page is rendering/reloading from 4 to 8 times when the screen width is changing through the breakpoint, or if changing pages. Maybe this only happends on my local mashine in dev.

A new Gists with GoogleTranslate or continue using select?

After all the problem I have to try to use Google translate the recommended way. You can find the solution for vue3/nuxt3 in my Gist-repo. It's working very well on a simple site, but maybe my website is to heavy. I still have some problem, so I need to try this select-package again.