Installing doesn't work in V3 – callback is not a function

[ralphjsmit]

Hey everyone,

I'm upgrading a project from a colleague to make use of compiling a single JS file with npm modules instead of using several script tags.

I noticed that we're using the $screen helper (and perhaps more :) ), so I updated our app.js file to the following:

import Alpine from 'alpinejs'
import Toolkit from '@alpine-collective/toolkit'

Alpine.plugin(Toolkit)

window.Alpine = Alpine
window.Alpine.start()

Unfortunately every time I try I to use this in the browser, I get the following error in the console:

I tried different Alpine versions, but I'm not sure what could be causing this. Am I importing this wrong?

Thanks!

PS: I also tried opening an issue in the v3 repo, but was redirected here. Don't know if that's on purpose or if you forgot to update the link.

[SimoTod]

Thanks for the heads up. I'll have a look tomorrow. P.s. If you only need $screen, you can try to install only that helper.

[ralphjsmit]

Thanks! Could you point me to some documentation or sth about installing the screen and scroll helper?

(It was quite difficult via Google/npm to find the right repo(s) with the correct version and documentation..)

[SimoTod]

https://github.com/alpine-collective/toolkit/blob/main/packages/%24screen/README.md#npm

[ralphjsmit]

Awesome man, that works! Thanks! Didn't figure out that the names in the table of the main readme were clickable🤯

I installed the plugins and everything works now, so you could close this issue (or keep it open if you want to doublecheck the above issue).

[SimoTod]

👍 I'll keep it open for now

[drdogbot7]

This seems to be an issue with the Interval plugin. I can import all of the other packages without any errors.

import Alpine from 'alpinejs';
import Dbg from '@alpine-collective/toolkit-dbg';
import Range from '@alpine-collective/toolkit-range';
import Screen from '@alpine-collective/toolkit-screen';
import Scroll from '@alpine-collective/toolkit-scroll';
import Truncate from '@alpine-collective/toolkit-truncate';

Alpine.plugin(Dbg);
Alpine.plugin(Range);
Alpine.plugin(Screen);
Alpine.plugin(Scroll);
Alpine.plugin(Truncate);

Alpine.start();

… but I get errors when I try to import the whole toolkit or just Inverval

import Alpine from 'alpinejs';
import Interval from '@alpine-collective/toolkit-interval';

Alpine.plugin(Interval);

Alpine.start();

ERROR: Uncaught TypeError: callback is not a function

import Alpine from 'alpinejs';
import Toolkit from '@alpine-collective/toolkit';

Alpine.plugin(Toolkit);

Alpine.start();

ERROR: Uncaught TypeError: callback is not a function