Hi guys

I am running into issues integrating tailwind css into my Phoenix/LV project the error seems related to webpack-cli specially around asset watchers. I know its not directly related to Phoenix/LV issue, but could anyone shed some light on it. Thanks.

here is the stack trace

10:13a ~/P/l ✨main* ➤ iex -S mix phx.server                                                                                                                                 
Erlang/OTP 23 [erts-11.1.2] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1] [hipe]

[info] Running LPWeb.Endpoint with cowboy 2.8.0 at 0.0.0.0:4000 (http)
[info] Access LPWeb.Endpoint at http://localhost:4000
Interactive Elixir (1.11.2) - press Ctrl+C to exit (type h() ENTER for help)
iex(1)> [webpack-cli] TypeError: Cannot read property 'name' of undefined
    at new WebpackCLI (/home/onkara/Projects/LP/assets/node_modules/webpack-cli/lib/webpack-cli.js:22:22)
    at runCLI (/home/onkara/Projects/LP/assets/node_modules/webpack-cli/lib/bootstrap.js:9:21)
    at Object.<anonymous> (/home/onkara/Projects/LP/assets/node_modules/webpack-cli/bin/cli.js:22:5)
    at Module._compile (node:internal/modules/cjs/loader:1108:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1137:10)
    at Module.load (node:internal/modules/cjs/loader:973:32)
    at Function.Module._load (node:internal/modules/cjs/loader:813:14)
    at Module.require (node:internal/modules/cjs/loader:997:19)
    at require (node:internal/modules/cjs/helpers:92:18)
    at runCli (/home/onkara/Projects/LP/assets/node_modules/webpack/bin/webpack.js:54:2)
[error] Task #PID<0.577.0> started from LPWeb.Endpoint terminating
** (stop) :watcher_command_error
    (phoenix 1.5.7) lib/phoenix/endpoint/watcher.ex:37: Phoenix.Endpoint.Watcher.watch/3
    (elixir 1.11.2) lib/task/supervised.ex:90: Task.Supervised.invoke_mfa/2
    (stdlib 3.13.2) proc_lib.erl:226: :proc_lib.init_p_do_apply/3
Function: &Phoenix.Endpoint.Watcher.watch/3
    Args: ["node", ["node_modules/webpack/bin/webpack.js", "--mode", "development", "--watch"], [cd: "/home/onkara/Projects/LP/assets"]] 

here is the webpack.config.js

const path = require('path');
const glob = require('glob');
// const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

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

  return {
    optimization: {
      minimizer: [
        new TerserPlugin({ cache: true, parallel: true, sourceMap: devMode }),
        new CssMinimizerPlugin({})
      ]
    },
    entry: {
      'app': glob.sync('./vendor/**/*.js').concat(['./js/app.js'])
    },
    output: {
      filename: '[name].js',
      path: path.resolve(__dirname, '../priv/static/js'),
      publicPath: '/js/'
    },
    devtool: devMode ? 'eval-cheap-module-source-map' : undefined,
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader'
          }
        },
        {
          test: /\.[s]?css$/,
          use: [
            MiniCssExtractPlugin.loader,
            'css-loader',
            'postcss-loader',
            'sass-loader',
          ],
        }
      ]
    },
    plugins: [
      new MiniCssExtractPlugin({ filename: '../css/app.css' }),
      new CopyWebpackPlugin([{ from: 'static/', to: '../' }])
    ]
    // .concat(devMode ? [new HardSourceWebpackPlugin()] : [])
  }
};

here is the package.json

{
  "repository": {},
  "description": " ",
  "license": "MIT",
  "scripts": {
    "deploy": "NODE_ENV=production webpack --mode production",
    "watch": "webpack --mode development --watch"
  },
  "dependencies": {
    "alpinejs": "^2.7.3",
    "kutty": "^0.4.1",
    "nprogress": "^0.2.0",
    "phoenix": "file:../deps/phoenix",
    "phoenix_html": "file:../deps/phoenix_html",
    "phoenix_live_view": "file:../deps/phoenix_live_view",
    "tailwindcss": "^2.0.1",
    "yarn": "^1.22.10"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "autoprefixer": "^10.0.4",
    "babel-loader": "^8.0.0",
    "copy-webpack-plugin": "^5.1.2",
    "css-loader": "^5.0.1",
    "css-minimizer-webpack-plugin": "^1.2.0",
    "hard-source-webpack-plugin": "^0.13.1",
    "mini-css-extract-plugin": "^1.3.3",
    "postcss": "^8.2.4",
    "postcss-loader": "^4.2.0",
    "sass": "^1.17.1",
    "sass-loader": "^10.1.0",
    "terser-webpack-plugin": "^2.3.2",
    "webpack": "^5.19.0",
    "webpack-cli": "^4.4.0"
  }
}

here is the config in dev.exs

config :LP, LPWeb.Endpoint,
  http: [port: 4000],
  debug_errors: true,
  code_reloader: true,
  check_origin: false,  
  watchers: [
    node: [
      "node_modules/webpack/bin/webpack.js",
      "--mode",
      "development",
      "--watch",
      cd: Path.expand("../assets", __DIR__)
    ]
  ]