Alpine Error x-data .catch is not defined - alpine.js

Question

H there,
im trying to get Alpine with webpack to run but allways get an error and dont know how to go about.
My Webpack config:
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const isProduction = 'production' === process.env.NODE_ENV;
const { VueLoaderPlugin } = require('vue-loader')
const webpack = require('webpack');
// Set the build prefix.
let prefix = isProduction ? '.min' : '';
const config = {
entry: {
main: './source/js/main.js',
admin: './source/js/admin.js',
admin_head: './source/js/admin_head.js',
classic: './source/js/classic.js',
},
output: {
filename: `[name]${prefix}.js`,
path: path.resolve(__dirname, 'dist')
},
mode: process.env.NODE_ENV,
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
loader: 'babel-loader',
options: {
presets: [
[
"#babel/preset-env"
]
]
}
},
{
test: /\.s[ac]ss$/i,
use: [
'vue-style-loader',
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
require('postcss-import'),
require('tailwindcss')('tailwind.js'),
require('postcss-nested'),
require('autoprefixer'),
]
}
}
}
],
},
]
},
plugins: [
new VueLoaderPlugin(),
new MiniCssExtractPlugin(),
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
],
resolve: {
alias: {
vue: process.env.NODE_ENV == 'production' ? 'vue/dist/vue.min.js' : 'vue/dist/vue.js'
}
}
}
module.exports = config
My Script File:
$(function (){
$('.color-picker').wpColorPicker();
})
})(jQuery)
import Alpine from 'alpinejs'
Alpine.start();
The script is loaded in the footer with defer:
<script defer src="https://ir.test/wp-content/plugins/real-time-comments/dist/admin_head.js?ver=1.1.1"></script>
And in a php file ive:
<div x-data="{ tab:'main' }">
<div class="bg-white grid grid-cols-6 gap-5">
<div class="pt-10 px-5">
<img src="<?php echo RTC_URL ?>dist/images/logo-full.svg" class="border-none w-full h-auto"/>
<div class="flex flex-col w-full mt-10">
<div #click="tab = 'main'"
:class="tab == 'main' ? 'border-b-2 border-plugin border-plugin font-bold' : 'border-b border-gray-500'"
class="px-5 py-3 cursor-pointer">
<?php _e( 'Main settings', 'real-time-comments' ) ?>
</div>
<div #click="tab = 'pusher'"
:class="tab == 'pusher' ? 'border-b-2 border-plugin border-plugin font-bold' : 'border-b border-gray-500'"
class="px-5 py-3 cursor-pointer">
<?php _e( 'Pusher API settings', 'real-time-comments' ) ?>
</div>
<div #click="tab = 'layout'"
:class="tab == 'layout' ? 'border-b-2 border-plugin border-plugin font-bold' : 'border-b border-gray-500'"
class="px-5 py-3 cursor-pointer">
<?php _e( 'Layout settings', 'real-time-comments' ) ?>
</div>
</div>
</div>
<div class="col-span-5">
<form method="post" action="options.php">
<div>
<div class="p-5 bg-gray-200">
<div x-show.transition="tab == 'main'">
<?php settings_fields( 'rtc_main_settings_section' ); ?>
<?php do_settings_sections( 'rtc_main_settings_page' ); ?>
</div>
<div x-show.transition="tab == 'pusher'">
<?php settings_fields( 'rtc_pusher_settings_section' ); ?>
<?php do_settings_sections( 'rtc_pusher_settings_page' ); ?>
</div>
<div x-show.transition="tab == 'layout'">
<?php settings_fields( 'rtc_layout_settings_section' ); ?>
<?php do_settings_sections( 'rtc_layout_settings_page' ); ?>
</div>
</div>
</div>
<input type="submit" name="submit" id="submit"
class="block w-full text-center bg-plugin py-3 text-center text-white my-10 shadow-lg hover:shadow cursor-pointer"
value="<?php echo __( 'save', 'real-time-comments' ) ?>">
</form>
</div>
</div>
</div>
</div>
When i load the Page i get an error;
Alpine Expression Error: func(...).catch is not a function
Expression: "{ tab:'main' }"
Has anybody an idea what im doing wrong, or anybody an sample how to include alpine.js with webpack. And where and how to include the script, i cannot load it via cdn because its not allowed by the wordpress plugin directory. I know its a bit overdoing to use alpine in the wp backend because it comes with jquery out of the box but for frontend files i get the same error.

Answer 1

I had a similar problem after upgrading from AlpineJS 3.2.3 (which worked) to AlpineJS 3.8 (which didn't). Eventually I found THIS. It seems at some point in time AlpineJS started using async/await which is ECMAScript 2017. My build had been targeting "es2015". Changed it to "es2017" and it worked. My build is via the esbuild embedded in Hugo so I changed js.Build's "target" option to "es2017". I don't know where to change it in webpack (that hurts my brain).

Answer 2

I don't see any problem with the Alpine directives in your markup.
I'm assuming admin_head.js is the bundle file in which AlpineJS is being initialized. If your script is being imported at the end of your element, there might not be a need to use the defer attribute.
Also make sure you're not loading AlpineJS twice via some CDN.