Webpack-cli issues when integrating Tailwind in Phoenx/LV

onkara

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

3 comments

/phoenix #webpack #liveview #tailwindcss

0 2884 3

2021-02-02 03:54:00 UTC

Showing Posts 1 to 3

Show Best Posts
Show All (oldest first)
Show All (newest first)

kokolegorille

There are some mistakes…

should be

new TerserPlugin({}),

This is not the latest, but if You update You will need to change config

      new CopyWebpackPlugin({
        patterns: [{ from: "static/", to: "./" }]
      }),

should be

    node: [
      "node_modules/webpack/bin/webpack.js",
      "--mode",
      "development",
      "--watch",
      "--watch-options-stdin",
      cd: Path.expand("../assets", __DIR__)
    ]

Try updating, and see if there are more errors.

Post #1

onkara

Thanks for your reply. It helped a lot.

I made the above mentioned changes and also changes to CopyWebPackPlugin config

with this in webpack.config.js

   optimization: {
      minimizer: [
        new TerserPlugin({}),
        new CssMinimizerPlugin({})
      ]
    },
   plugins: [
      new MiniCssExtractPlugin({ filename: '../css/app.css' }),
      new CopyWebpackPlugin({
        patterns: [
          { from: 'static/', to: '../' }
          ]
      })
    ]

then I got this error

ERROR in ./css/app.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
Error: Cannot find module 'postcss-import'
Require stack:
- /home/onkara/Projects/LP/assets/postcss.config.js
- /home/onkara/Projects/LP/assets/node_modules/cosmiconfig/dist/loaders.js
- /home/onkara/Projects/LP/assets/node_modules/cosmiconfig/dist/ExplorerBase.js
- /home/onkara/Projects/LP/assets/node_modules/cosmiconfig/dist/Explorer.js
- /home/onkara/Projects/LP/assets/node_modules/cosmiconfig/dist/index.js
- /home/onkara/Projects/LP/assets/node_modules/postcss-loader/dist/utils.js
- /home/onkara/Projects/LP/assets/node_modules/postcss-loader/dist/index.js
- /home/onkara/Projects/LP/assets/node_modules/postcss-loader/dist/cjs.js
- /home/onkara/Projects/LP/assets/node_modules/loader-runner/lib/loadLoader.js
- /home/onkara/Projects/LP/assets/node_modules/loader-runner/lib/LoaderRunner.js
- /home/onkara/Projects/LP/assets/node_modules/webpack/lib/NormalModule.js
- /home/onkara/Projects/LP/assets/node_modules/webpack/lib/NormalModuleFactory.js
- /home/onkara/Projects/LP/assets/node_modules/webpack/lib/Compiler.js
- /home/onkara/Projects/LP/assets/node_modules/webpack/lib/webpack.js
- /home/onkara/Projects/LP/assets/node_modules/webpack/lib/index.js
- /home/onkara/Projects/LP/assets/node_modules/webpack-cli/lib/webpack-cli.js
- /home/onkara/Projects/LP/assets/node_modules/webpack-cli/lib/bootstrap.js
- /home/onkara/Projects/LP/assets/node_modules/webpack-cli/bin/cli.js
- /home/onkara/Projects/LP/assets/node_modules/webpack/bin/webpack.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:925:15)
    at Function.Module._load (node:internal/modules/cjs/loader:769:27)
    at Module.require (node:internal/modules/cjs/loader:997:19)
    at require (/home/onkara/Projects/LP/assets/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at Object.<anonymous> (/home/onkara/Projects/LP/assets/postcss.config.js:3:5)
    at Module._compile (/home/onkara/Projects/LP/assets/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    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 processResult (/home/onkara/Projects/LP/assets/node_modules/webpack/lib/NormalModule.js:598:19)
    at /home/onkara/Projects/LP/assets/node_modules/webpack/lib/NormalModule.js:692:5
    at /home/onkara/Projects/LP/assets/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /home/onkara/Projects/LP/assets/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/home/onkara/Projects/LP/assets/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.loader (/home/onkara/Projects/LP/assets/node_modules/postcss-loader/dist/index.js:56:7)
 @ ./js/app.js 4:0-25

1 ERROR in child compilations
webpack 5.19.0 compiled with 2 errors in 1292 ms
assets by status 593 KiB [cached] 5 assets
cached modules 241 KiB (javascript) 937 bytes (runtime) [cached] 11 modules
./css/app.scss 39 bytes [built] [1 error]

my app.scss looks this

// @import "./phoenix.css";
@import "tailwindcss/base";

@import "tailwindcss/components";
// @import "./components/navbar.css"; /* added */
@import "tailwindcss/utilities";
@import "../node_modules/nprogress/nprogress.css";

/* LiveView specific classes for your customizations */
.phx-no-feedback.invalid-feedback,
.phx-no-feedback .invalid-feedback {
  display: none;
}

.phx-click-loading {
  opacity: 0.5;
  transition: opacity 1s ease-out;
}

.phx-disconnected{
  cursor: wait;
}
.phx-disconnected *{
  pointer-events: none;
}

.phx-modal {
  opacity: 1!important;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}
......

So I added "postcss-import": "^14.0", to package.json and I no longer got those errors and I have both tailwindcss and regular css working together.

Once again thanks a lot.

Post #2

overcomeoj

Seems you sorted your issue, but for others who might need a guide, I followed this: Adding Tailwind CSS to Phoenix 1.6 a few days ago and had no trouble getting everything to click together.

Post #3

— All posts loaded —