Uncaught TypeError: BulmaTagsInput.attach is not a function

[basharabdullah]

I've been battling with this weird error for some time now. Wonder if anyone can help. Basically I have this code:

<div class="control">
<input class="input" data-type="tags" data-item-text="name" data-item-value="numericCode" data-case-sensitive="false" value="" type="text" name="job[skill_list]" id="job_skill_list" />
</div>

...

What I want to do is add the dynamic data, and I'm using the default test data for now. If I try this

document.addEventListener('DOMContentLoaded', function() {
    console.log('you');
    var tagsInputElem = document.getElementById('job_skill_list');
    new BulmaTagsInput(tagsInputElem, {
      source: async function(value) {
        // Value equal input value
        // We can then use it to request data from external API
        return await fetch("https://restcountries.eu/rest/v2/name/" + value)
          .then(function(response) {
            return response.json();
          });
        }
      });
  }, false);

Nothing happens, and no errors in console. The input field is just a regular input field. So I tried to attach only, and got the not a function error

if($('.tagsinput').length == 0 ) {
    var tagsinput = BulmaTagsInput.attach();
  }

It's a Rails app, and the BulmaTagsInput seems to be loading fine. Below is line from application.js.

BulmaTagsInput = require('@creativebulma/bulma-tagsinput')

And here is the Yarn.lock snippet

"@creativebulma/bulma-tagsinput@^1.0.3":
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/@creativebulma/bulma-tagsinput/-/bulma-tagsinput-1.0.3.tgz#bbf38aad9a4ed0f04f2baa7832b21679cdc54462"
  integrity sha512-uQg0KEBcvEmSfwozv2EkFtqai1+pwOgunt3YLlADjRuyKXQePcR3nPW4EDnLMsCt9XlDr4RLu5pcp3XwHIhaOQ==

Sorry for the long ticket. Any idea what could be wrong?

[mebibou]

@basharabdullah what does it print if you do console.log(BulmaTagsInput)?