title: Alpine Error x-data .catch is not defined
body: <p>H there,
  im trying to get Alpine with webpack to run but allways get an error and dont know how to go about.</p>
  <p>My Webpack config:</p>
  <pre><code>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: [
                          [
                              &quot;@babel/preset-env&quot;
                          ]
                      ]
                  }
              },
              {
                  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
  </code></pre>
  <p>My Script File:</p>
  <pre><code>    $(function (){
          $('.color-picker').wpColorPicker();
      })
  })(jQuery)
  
  import Alpine from 'alpinejs'
  Alpine.start();
  </code></pre>
  <p>The script is loaded in the footer with defer:</p>
  <pre><code>&lt;script defer src=&quot;https://ir.test/wp-content/plugins/real-time-comments/dist/admin_head.js?ver=1.1.1&quot;&gt;&lt;/script&gt;
  </code></pre>
  <p>And in a php file ive:</p>
  <pre><code>&lt;div x-data=&quot;{ tab:'main' }&quot;&gt;
                  &lt;div class=&quot;bg-white grid grid-cols-6 gap-5&quot;&gt;
                      &lt;div class=&quot;pt-10 px-5&quot;&gt;
                          &lt;img src=&quot;&lt;?php echo RTC_URL ?&gt;dist/images/logo-full.svg&quot; class=&quot;border-none w-full h-auto&quot;/&gt;
                          &lt;div class=&quot;flex flex-col w-full mt-10&quot;&gt;
                              &lt;div @click=&quot;tab = 'main'&quot;
                                   :class=&quot;tab == 'main' ? 'border-b-2 border-plugin border-plugin font-bold' : 'border-b border-gray-500'&quot;
                                   class=&quot;px-5 py-3 cursor-pointer&quot;&gt;
                                  &lt;?php _e( 'Main settings', 'real-time-comments' ) ?&gt;
                              &lt;/div&gt;
                              &lt;div @click=&quot;tab = 'pusher'&quot;
                                   :class=&quot;tab == 'pusher' ? 'border-b-2 border-plugin border-plugin font-bold' : 'border-b border-gray-500'&quot;
                                   class=&quot;px-5 py-3 cursor-pointer&quot;&gt;
                                  &lt;?php _e( 'Pusher API settings', 'real-time-comments' ) ?&gt;
                              &lt;/div&gt;
                              &lt;div @click=&quot;tab = 'layout'&quot;
                                   :class=&quot;tab == 'layout' ? 'border-b-2 border-plugin border-plugin font-bold' : 'border-b border-gray-500'&quot;
                                   class=&quot;px-5 py-3 cursor-pointer&quot;&gt;
                                  &lt;?php _e( 'Layout settings', 'real-time-comments' ) ?&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
  
                      &lt;/div&gt;
                      &lt;div class=&quot;col-span-5&quot;&gt;
                          &lt;form method=&quot;post&quot; action=&quot;options.php&quot;&gt;
                              &lt;div&gt;
                                  &lt;div class=&quot;p-5 bg-gray-200&quot;&gt;
                                      &lt;div x-show.transition=&quot;tab == 'main'&quot;&gt;
                                          &lt;?php settings_fields( 'rtc_main_settings_section' ); ?&gt;
                                          &lt;?php do_settings_sections( 'rtc_main_settings_page' ); ?&gt;
                                      &lt;/div&gt;
                                      &lt;div x-show.transition=&quot;tab == 'pusher'&quot;&gt;
                                          &lt;?php settings_fields( 'rtc_pusher_settings_section' ); ?&gt;
                                          &lt;?php do_settings_sections( 'rtc_pusher_settings_page' ); ?&gt;
                                      &lt;/div&gt;
                                      &lt;div x-show.transition=&quot;tab == 'layout'&quot;&gt;
                                          &lt;?php settings_fields( 'rtc_layout_settings_section' ); ?&gt;
                                          &lt;?php do_settings_sections( 'rtc_layout_settings_page' ); ?&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;input type=&quot;submit&quot; name=&quot;submit&quot; id=&quot;submit&quot;
                                     class=&quot;block w-full text-center bg-plugin py-3 text-center text-white my-10 shadow-lg hover:shadow cursor-pointer&quot;
                                     value=&quot;&lt;?php echo __( 'save', 'real-time-comments' ) ?&gt;&quot;&gt;
                          &lt;/form&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  </code></pre>
  <p>When i load the Page i get an error;</p>
  <pre><code>Alpine Expression Error: func(...).catch is not a function
  
  Expression: &quot;{ tab:'main' }&quot;
  </code></pre>
  <p>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.</p>