Alpine Error x-data .catch is not defined

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.