Alpine.js V3 support for LiveView

Edit: Before copying and pasting anything into your project, it seems like Webpack v5 is needed to build Alpine v3. See posts below.

While trying out the recent V3 release of Alpine.js (:partying_face: Thanks/Congrats Caleb Porzio) in a LiveView project I noticed dropdown menus would be visible on page load.

Commenting out liveSocket.connect() and the Alpine stuff worked again so it pointed to an issue with when LiveView takes over.

TL;DR Besides the new install instructions and upgrade guide it looks like the onBeforeElUpdated code used we all will have used for V2 needs to be changed to the following:

// Beforeā€¦ (Alpine V2)
onBeforeElUpdated(from, to) {
  if (from.__x) { window.Alpine.clone(from.__x, to) }
}

// Afterā€¦ (Alpine V3)
onBeforeElUpdated(from, to) {
  if (from._x_dataStack) { window.Alpine.clone(from, to) }
}

This change has been extracted from the Livewire repo and appears to get things working again after LiveView connects but I havenā€™t run any extensive tests beyond my dropdown menus working again

PR for the changes need to Support alpine V3 on Livewire for the curious.

Hope this helps someone else out.

22 Likes

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

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

1 Like

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.

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.

8 Likes