Alpine.js V3 support for LiveView

can you share your webpack.config.js? I get the following error when upgrading to V3. It doesn’t like the ? in the function name.

ERROR in ./node_modules/alpinejs/dist/module.esm.js 3032:32
Module parse failed: Unexpected token (3032:32)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     return clone2;
|   };
>   let hide = () => el._x_undoIf?.() || delete el._x_undoIf;
|   effect3(() => evaluate2((value) => {
|     value ? show() : hide();
 @ ./js/app.js 24:0-30 86:16-22 87:0-6
 @ multi ./js/app.js

I was seeing the same issue @cmo. I just updated the rest of my node packages (including webpack to v5) and it’s come good. I’m not sure which of the deps needed updating, but my updated package.json looks like this:

{
  "repository": {},
  "description": " ",
  "license": "MIT",
  "engines": {
    "node": ">= 14.16.1"
  },
  "scripts": {
    "deploy": "NODE_ENV=production webpack --mode=production",
    "dev": "webpack --mode=development",
    "watch": "NODE_ENV=development webpack --mode=development --watch"
  },
  "dependencies": {
    "@tailwindcss/forms": "^0.3.3",
    "alpinejs": "^3.0.6",
    "autoprefixer": "^10.2.6",
    "phoenix": "file:../deps/phoenix",
    "phoenix_html": "file:../deps/phoenix_html",
    "phoenix_live_view": "file:../deps/phoenix_live_view",
    "postcss": "^8.3.4",
    "tailwindcss": "^2.1.4",
    "topbar": "^1.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.14.0",
    "@babel/preset-env": "^7.14.0",
    "babel-loader": "^8.2.2",
    "copy-webpack-plugin": "^8.1.1",
    "css-loader": "^5.2.0",
    "css-minimizer-webpack-plugin": "^1.3.0",
    "glob": "^7.1.7",
    "mini-css-extract-plugin": "^1.5.0",
    "postcss-loader": "^4.3.0",
    "sass": "^1.32.8",
    "sass-loader": "^11.0.1",
    "webpack": "5.36.0",
    "webpack-cli": "^4.6.0"
  }
}

and webpack.config.js:

const path = require('path');
const glob = require('glob');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = (env, options) => {
  const devMode = options.mode !== 'production';

  return {
    entry: {
      'app': glob.sync('./vendor/**/*.js').concat(['./js/app.js'])
    },
    output: {
      path: path.resolve(__dirname, '../priv/static/js'),
      filename: '[name].js',
      publicPath: '/js/'
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader'
          }
        },
        {
          test: /\.[s]?css$/,
          use: [
            MiniCssExtractPlugin.loader,
            'css-loader',
            'postcss-loader',
          ],
        },
        {
          test: /\.svg$/i,
          type: 'asset/inline'
        },
        {
          test: /\.(png|jpg|jpeg|gif)$/i,
          type: 'asset/resource',
        },
        {
          test: /\.(woff|woff2|eot|ttf|otf)$/i,
          type: 'asset/resource',
        },
      ]
    },
    plugins: [
      new MiniCssExtractPlugin({ filename: '../css/app.css' }),
      new CopyWebpackPlugin({
        patterns: [
          { from: 'static/', to: '../' }
        ]
      })
    ],
    mode: options.mode || 'production',
    optimization: {
      minimizer: [
        '...',
        new CssMinimizerPlugin()
      ]
    },
    target: 'node14.16',
    devtool: devMode ? 'source-map' : undefined
  }
};

All of which i borrowed from Use Webpack v5.x for asset bundling by acconrad · Pull Request #4310 · phoenixframework/phoenix · GitHub

Thanks @dblack I’m also on Webpack v5, seems that’s the issue here. I have confirmed in an example app that a default Phoenix 1.5.9 setup will not support Alpine v3 sadly. V3 is only ~a day old but it is now the default installed by NPM which might see more people caught out by this from now on.

Thanks. I was waiting for this PR before I upgraded to webpack5 or vite, but I might dive in early.

https://github.com/phoenixframework/phoenix/pull/4337

How did you go? I noticed my js builds grew more than 10% after moving to webpack 5 and that config. I’m probably gonna roll back and wait until something a bit more official is released.

I’ve not tried yet. You might want to look at this person’s webpack 5 config:

One thing I’ve found out is that you can’t have alpine state as part of the <body> tag. Since liveview acts on the first child of the body, if you had

<body
   x-data="..."
>
   ...

you will have to add another div like

<body>
   <div
      x-data="..."
    >
     ...
   </div>

The previous was working with alpine v2, but with v3 you have to add the div.
Hope it helps someone.