Runtime Errors When Upgrading from Alpine.js 2.8.2 to 3.14.0 with Webpack and Babel

[josegomes-me]

When updating from Alpine.js version 2.8.2 to version 3.14.0, I encounter runtime errors that break the functionality of my application. The error logs indicate a problem with the Webpack configuration and Alpine.js integration.

Steps to Reproduce

Set up a Webpack project with Babel.
Install Alpine.js version 2.8.2 and verify it works correctly.
Update Alpine.js to version 3.14.0.
Run the project using npx webpack serve.
Observe the runtime errors in the browser console.
Expected Behavior
Alpine.js should function correctly without any runtime errors after updating to version 3.14.0.

Actual Behavior

The application throws runtime errors, and Alpine.js does not work as expected. The errors in the console are as follows:

Uncaught runtime errors:

ERROR
[object Object]
    at handleError (webpack://site-josegomes-me/./node_modules/webpack-dev-server/client/overlay.js?:252:58)
    at eval (webpack://site-josegomes-me/./node_modules/webpack-dev-server/client/overlay.js?:275:7)
ERROR
[object Object]
    at handleError (webpack://site-josegomes-me/./node_modules/webpack-dev-server/client/overlay.js?:252:58)
    at eval (webpack://site-josegomes-me/./node_modules/webpack-dev-server/client/overlay.js?:275:7)

Environment

Operating System: MAC OS 13.0
Node.js Version: 20.6.1
Webpack Version: ^5.91.0
Babel Version: ^7.24.5
Alpine.js Version: 3.14.0

Configuration Files

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: ['@babel/plugin-transform-runtime']
          }
        }
      }
    ]
  },
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist')
    },
    compress: true,
    port: 9000,
    hot: true
  },
  resolve: {
    extensions: ['.js']
  }
};

.babelrc

{
  "presets": ["@babel/preset-env"],
  "plugins": ["@babel/plugin-transform-runtime"]
}

src/index.js

import Alpine from 'alpinejs';

window.Alpine = Alpine;
Alpine.start();

Additional Context

The issue does not occur with Alpine.js version 2.8.2, but it consistently occurs after updating to version 3.14.0. This suggests that there may be a compatibility issue with the latest version of Alpine.js and the current Webpack/Babel setup.

Please let me know if you need any further information or if there are any additional steps I can take to help diagnose this issue.

[ekwoka]

You need to get it to show you some better errors.

Since from 2 to 3 is a major version, there is no expectation all user code will work.

Unfortunately, without better error messages from webpack (is it too late to just use vite?) there isn't much anyone can do to help you.

For examples, what is overlay.js? What is your handleError function?