alpine clipboard and TALL stack

[sxshateri]

im trying to add the alpine-clipboard plugin to the project that I use TALL in and I have to add it before the alpine starts/loads to avoid the declaring errors in the console but since there is no alpine imports and property declare in the app.js, I'm not really sure how to do that. anyone who can help would be much appreciated.

currently by just adding the import Clipboard from "@ryangjchandler/alpine-clipboard" and Alpine.plugin(Clipboard) I get the following error in the console:

Uncaught (in promise) ReferenceError: $clipboard is not defined
    at eval (eval at generateFunctionFromString (module.esm.js:1)

[ryangjchandler]

@sxshateri How are you loading Alpine, via the CDN?

[sxshateri]

@ryangjchandler nope its part of the TALL stack.

[ryangjchandler]

@sxshateri Can you post an example please. The TALL stack won't determine how it's loaded.

[sxshateri]

The TALL stack won't determine how it's loaded.
@ryangjchandler that's exactly my issue. not sure how the TALL stack loads the Alpine but its definitely not using the laravel mix since there is no import of alpine js in the app.js nor laravel mix config file.

app.js

require('./bootstrap');
var Turbolinks = require("turbolinks");
Turbolinks.start();
import Clipboard from "@ryangjchandler/alpine-clipboard";
Alpine.plugin(Clipboard);

wbpack.mix.js

const mix = require("laravel-mix");

require("laravel-mix-tailwind");

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js("resources/js/app.js", "public/js/app.js")
    .sass("resources/sass/app.scss", "public/css/app.css")
    .tailwind("./tailwind.config.js")
    .sourceMaps();

if (mix.inProduction()) {
    mix.version();
}

please note that the alpine clipboard is installed using npm and its available but since i cant load it before the alpine i get the error.

[ryangjchandler]

How are you including Alpine on the page?

[sxshateri]

@ryangjchandler its in the compiled js assets in public/js/app.js
it is pre-added to the project by {{ url(mix('js/app.js')) }}

[ryangjchandler]

The latest version of this package supports Alpine 3.x and greater. Please follow the Alpine installation instructions first.

[sxshateri]

@ryangjchandler alpime is installed and compiled as part of the TALL stack package and as per your documentation I just need to install the package using npm and add it to the webpack by adding the

import Clipboard from "@ryangjchandler/alpine-clipboard"

Alpine.plugin(Clipboard)

And I did so but I'm getting the following error in the console

Uncaught (in promise) ReferenceError: $clipboard is not defined
    at eval (eval at generateFunctionFromString (module.esm.js:1)

What am I doing wrong?

[ryangjchandler]

The code you provided doesn't show me how you've got Alpine installed. That's why I'm struggling to help.

I'm guessing that Alpine is being imported inside of the bootstrap.js file?

[sxshateri]

@ryangjchandler it indeed was. i never look into that because I could never imagine the alpine was imported into bootstrap.js then it was imported to webpack. it is a very odd and unorthodox way of doing it if you ask me.
Anyways adding the alpine clipboard into the bootstrap.js fixed the issue. that's to you for mentioning it because if it was not because of you I would never look into that.