TypeError: i is not a function

[AndreiMotinga]

fresh installed alpine. just trying it out first time.

Copied a menu from tailwind. and following their instrucitons to add alpine to a dropdwon. here's html:

<!-- This example requires Tailwind CSS v2.0+ -->
<div x-data="{ isOpen: false }" class="relative">
  <!-- Item active: "text-gray-900", Item inactive: "text-gray-500" -->
  <button @click="isOpen = !isOpen" type="button" class="text-gray-500 group bg-white rounded-md inline-flex items-center text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" aria-expanded="false">
    <span>Solutions</span>
    <!--
      Heroicon name: solid/chevron-down

      Item active: "text-gray-600", Item inactive: "text-gray-400"
    -->
    <svg class="text-gray-400 ml-2 h-5 w-5 group-hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
      <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
    </svg>
  </button>

  <!--
    Flyout menu, show/hide based on flyout menu state.

    Entering: "transition ease-out duration-200"
      From: "opacity-0 translate-y-1"
      To: "opacity-100 translate-y-0"
    Leaving: "transition ease-in duration-150"
      From: "opacity-100 translate-y-0"
      To: "opacity-0 translate-y-1"
  -->
  <div
    x-show="isOpen"
    x-transition:enter="transition ease-out duration-200"
    x-transition:enter-start="opacity-0 translate-y-1"
    x-transition:enter-end="opacity-100 translate-y-0"
    x-transition:leave="transition ease-in duration-150"
    x-transition:leave-start="opacity-100 translate-y-0"
    x-transition:leave-end="opacity-0 translate-y-1"
    class="absolute z-10 left-1/2 transform -translate-x-1/2 mt-3 px-2 w-screen max-w-xs sm:px-0"
  >
    <div class="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
      <div class="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8">
        <a href="#" class="-m-3 p-3 block rounded-md hover:bg-gray-50 transition ease-in-out duration-150">
          <p class="text-base font-medium text-gray-900">
            Blog
          </p>
          <p class="mt-1 text-sm text-gray-500">
            Learn about tips, product updates and company culture.
          </p>
        </a>

        <a href="#" class="-m-3 p-3 block rounded-md hover:bg-gray-50 transition ease-in-out duration-150">
          <p class="text-base font-medium text-gray-900">
            Help Center
          </p>
          <p class="mt-1 text-sm text-gray-500">
            Get all of your questions answered in our forums of contact support.
          </p>
        </a>

        <a href="#" class="-m-3 p-3 block rounded-md hover:bg-gray-50 transition ease-in-out duration-150">
          <p class="text-base font-medium text-gray-900">
            Guides
          </p>
          <p class="mt-1 text-sm text-gray-500">
            Learn how to maximize our platform to get the most out of it.
          </p>
        </a>

        <a href="#" class="-m-3 p-3 block rounded-md hover:bg-gray-50 transition ease-in-out duration-150">
          <p class="text-base font-medium text-gray-900">
            Events
          </p>
          <p class="mt-1 text-sm text-gray-500">
            Check out webinars with experts and learn about our annual conference.
          </p>
        </a>

        <a href="#" class="-m-3 p-3 block rounded-md hover:bg-gray-50 transition ease-in-out duration-150">
          <p class="text-base font-medium text-gray-900">
            Security
          </p>
          <p class="mt-1 text-sm text-gray-500">
            Understand how we take your privacy seriously.
          </p>
        </a>
      </div>
    </div>
  </div>
</div>

in console

module.esm.js:3131 Uncaught (in promise) TypeError: i is not a function

...
    el._x_transitioning.beforeCancel(function () {
      return reject({
        isFromCancelledTransition: true
      });
    });
  }) : Promise.resolve(hide);
  queueMicrotask(function () {
    var closest = closestHide(el);

    if (closest) {
      if (!closest._x_hideChildren) closest._x_hideChildren = [];

      closest._x_hideChildren.push(el);
    } else {
      queueMicrotask(function () {
        var hideAfterChildren = function hideAfterChildren(el2) {
          var carry = Promise.all([el2._x_hidePromise].concat(_toConsumableArray((el2._x_hideChildren || []).map(hideAfterChildren)))).then(function (_ref30) {
            var _ref31 = _slicedToArray(_ref30, 1),
                i = _ref31[0];

            return i(); <<<<<<<<<< here
          });
          delete el2._x_hidePromise;
          delete el2._x_hideChildren;
          return carry;
        };

        hideAfterChildren(el).catch(function (e) {
          if (!e.isFromCancelledTransition) throw e;
        });
      });
      
      ...

[KevinBatdorf]

Can you put it on CodePen and reproduce it?

[AndreiMotinga]

nope. worked in index.html using cdn. 🤔 I'm using rails with webpack

[AndreiMotinga]

it doesn't happen when using cdn, but it breaks with rails setup. among alpine and rails' webpacker I don't know what causes this. feel free to close. I dont' know where is the appropriate place to report this bug.

[danddanddand]

I had similar error when I forgot to defer my webpack bundle with v3. Your script from rails webpacker (which should be bundling alpine) should look like this <script type="text/javascript" src="/yourContextRoot/your-bundle.js" defer></script>

[PaulMorel]

This worked, thanks!