Swup 4.5.1: type error in user hook

[ShaneSheppard]

Describe your problem 🧐

Getting this error on page transitions.

swup.hooks.on("animation:in:end", Webflow);

Full Error in console -
Error in hook 'animation:in:end': TypeError: t is not a function
at swup@4:1:9934
at new Promise ()
at swup@4:1:9906
at swup@4:1:9966
at swup@4:1:10065
at t (swup@4:1:9082)
at swup@4:1:9215
at S.run (swup@4:1:9730)
at swup@4:1:8428
(anonymous) @ swup@4:1
Promise.then (async)
(anonymous) @ swup@4:1
(anonymous) @ swup@4:1
t @ swup@4:1
(anonymous) @ swup@4:1
run @ swup@4:1
(anonymous) @ swup@4:1
Promise.then (async)
(anonymous) @ swup@4:1
Promise.then (async)
call @ swup@4:1
(anonymous) @ swup@4:1
Promise.then (async)
(anonymous) @ swup@4:1
Promise.then (async)
(anonymous) @ swup@4:1
Promise.then (async)
V @ swup@4:1
e @ swup@4:1
Promise.then (async)
(anonymous) @ swup@4:1
Promise.then (async)
e @ swup@4:1
(anonymous) @ swup@4:1
(anonymous) @ swup@4:1
(anonymous) @ swup@4:1
(anonymous) @ swup@4:1
(anonymous) @ swup@4:1
t @ swup@4:1
(anonymous) @ swup@4:1
run @ swup@4:1
(anonymous) @ swup@4:1
Promise.then (async)
call @ swup@4:1
r @ swup@4:1
Promise.then (async)
(anonymous) @ swup@4:1
Promise.then (async)
(anonymous) @ swup@4:1
r @ swup@4:1
H @ swup@4:1
(anonymous) @ swup@4:1
runSync @ swup@4:1
callSync @ swup@4:1
handleLinkClick @ swup@4:1
h @ swup@4:1

What is your question? 🙋‍♀️

Can someone tell me how to fix this error?
It happens once transitioning after load i am using this line of code on another site no problem.

URL to minimal reproduction 🔗

https://prospectus-00f8af.webflow.io/junior

Checked all these? 📚

• I have read and searched the official docs
• I have checked discussions and existing issues for answers to my question
• I agree to follow this project's Code of Conduct
• I have provided all necessary information to the best of my knowledge

[ShaneSheppard]

this is now happening on both sites using the swup@4 cdn link.
On further review this is a problem only in version 4.5.1 not in the version before.

[daun]

swup 4.5.1 fixed its hooks implementation to log errors in user hooks to the console, instead of aborting the whole navigation and forcing a full browser reload. I'm guessing the error was there before but hasn't been noticed because swup would trigger a full reload and clear the console in the process.

[hirasso]

@ShaneSheppard can you tell us when exactly this happens? On what page are you clicking which link?

[ShaneSheppard]

Here is an example -
https://taunton-school-summer-school.webflow.io/junior

[hirasso]

Ah, found it. Well – it seems like Webflow indeed is not a function. Looking at your sites source code:

var Webflow = Webflow || [];

it's an array…

[ShaneSheppard]

Here is that full code -

var Webflow = Webflow || [];
Webflow.push(function () {
    // IX 2 Fix for loading animations when the site loads
    //$('html').attr('data-wf-page', 'page-id');
    $("html").attr("data-wf-site", "site-id");
    window.Webflow && window.Webflow.destroy();
    window.Webflow && window.Webflow.ready();
    window.Webflow && window.Webflow.require("ix2").init();
    document.dispatchEvent(new Event("readystatechange"));

    // IX 2 Fix for if you have different interactions at different breakpoints
    var resizeTimer;
    $(window).on("resize", function (e) {
      clearTimeout(resizeTimer);
      resizeTimer = setTimeout(function () {
        //When the page is resized re-start animations
        document.dispatchEvent(new Event("readystatechange"));
      }, 500);
    });
  });
  swup.hooks.on("animation:in:end", Webflow);

[hirasso]

Yes. Have you tried this?

swup.hooks.on("animation:in:end", Webflow[0]);

[ShaneSheppard]

Yes on the link above still behaves the same

[hirasso]

@ShaneSheppard going forward, should you encounter other bugs, you should always first ask yourself:

Are you absolutely sure that this is an issue with swup?

In the above scenario, the error message tells you exactly what is wrong with your implementation.

The same applies to all other open source packages you are using… otherwise it's likely that you will burn out maintainers at some point.

Thank you! 🙏

[ShaneSheppard]

I made a change to the script -

function initializeWebflow() {
  // IX 2 Fix for loading animations when the site loads
  $('html').attr('data-wf-site', 'site-id');
  window.Webflow && window.Webflow.destroy();
  window.Webflow && window.Webflow.ready();
  window.Webflow && window.Webflow.require('ix2').init();
  document.dispatchEvent(new Event('readystatechange'));

  // IX 2 Fix for if you have different interactions at different breakpoints
  var resizeTimer;
  $(window).on('resize', function(e) {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
      //When the page is resized re-start animations
      document.dispatchEvent(new Event('readystatechange'));
    }, 500);
  });
}

swup.hooks.on('animation:in:end', function() {
  initializeWebflow();
});

No console error but now works strangely

[hirasso]

Closing this as OP is not providing helpful information.