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__)
]
]
