高山错误 x-data .catch 未定义

Question

那里， 我试图让带有 webpack 的 Alpine 运行，但总是出错并且不知道该怎么做。

我的 Webpack 配置：

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

我的脚本文件：

    $(function (){
        $('.color-picker').wpColorPicker();
    })
})(jQuery)

import Alpine from 'alpinejs'
Alpine.start();

脚本通过 defer 加载到页脚中：

<script defer src="https://ir.test/wp-content/plugins/real-time-comments/dist/admin_head.js?ver=1.1.1"></script>

在一个 php 文件中：

<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>

当我加载页面时出现错误；

Alpine Expression Error: func(...).catch is not a function

Expression: "{ tab:'main' }"

有人知道我做错了什么，或者有人知道如何将 alpine.js 包含在 webpack 中。以及在何处以及如何包含脚本，我无法通过 cdn 加载它，因为 wordpress 插件目录不允许它。我知道在 wp 后端使用 alpine 有点过头了，因为它带有开箱即用的 jquery，但是对于前端文件，我得到了同样的错误。

Answer 1

从 AlpineJS 3.2.3（有效）升级到 AlpineJS 3.8（无效）后，我遇到了类似的问题。最终我找到了THIS。似乎 AlpineJS 在某个时间点开始使用 ECMAScript 2017 的 async/await。我的构建一直针对“es2015”。将其更改为“es2017”并且有效。我的构建是通过嵌入在 Hugo 中的 esbuild，所以我将 js.Build 的“target”选项更改为“es2017”。我不知道在 webpack 哪里改（这很伤脑筋）。

Answer 2

我认为您的标记中的 Alpine 指令没有任何问题。

我假设 admin_head.js 是初始化 AlpineJS 的捆绑文件。如果在元素末尾导入脚本，则可能不需要使用 defer 属性。

还要确保您没有通过某些 CDN 两次加载 AlpineJS。