[error] Could not start watcher "npm" from ".../assets", executable does not exist

Phoenix Forum Questions / Help
, ,
1

Hey everyone,

I keep on getting this error message when running mix phx.server:

[error] Could not start watcher "npm" from ".../assets", executable does not exist

The app just works fine(as far as I can see) beside of the CSS is not applied.

Versions used:
elixir 1.12
erlang 23.3.4
node v14.19.1
npm 6.14.16
phoenix(from mix.exs) “~> 1.5.0”

Any ideas? cd assets && npm install didn’t help.
Thank you!

2

You should provide more info on your configuration… for example.

  • Show the config/dev.exs watcher part
  • Tell us what bundler (esbuild, webpack) You are using

It’s a bit short to tell You what the problem is…

3

I’m using webpack.

So here’s the config.exs:

use Mix.Config

# General application configuration
config :myapp,
  ecto_repos: [MyApp.Repo]

config :myapp,
  items_per_page: 10

# Configures the endpoint
config :myapp, MyAppWeb.Endpoint,
  url: [host: "localhost"],
  secret_key_base: "IcrUuGYFkGys3tgfqEL5aGCHiAq4/bz4UcpvXFpLZde9Z3oWv//NdWfkXWA2BLNd",
  render_errors: [view: MyAppWeb.ErrorView, accepts: ~w(html json)],
  pubsub_server: MyApp.PubSub

# Appsignal
config :appsignal, :config,
  otp_app: :myapp,
  name: "MyApp",
  env: Mix.env,
  active: false

# Use Jason for JSON parsing in Phoenix
config :phoenix, :json_library, Jason

# Configures Elixir's Logger
config :logger, :console,
  format: "$time $metadata[$level] $message\n",
  metadata: [:request_id]

# Import environment specific config. This must remain at the bottom
# of this file so it overrides the configuration defined above.
import_config "#{Mix.env()}.exs"

And here’s the dev.exs:

use Mix.Config

config :myapp, MyAppWeb.Endpoint,
  http: [port: 4000],
  debug_errors: true,
  code_reloader: true,
  check_origin: false,
  watchers: [npm: ["run", "watch", "--stdin", cd: Path.expand("../assets/", __DIR__)]]

# Watch static and templates for browser reloading.
config :myapp, MyAppWeb.Endpoint,
  live_reload: [
    patterns: [
      ~r{priv/static/.*(js|css|png|jpeg|jpg|gif|svg)$},
      ~r{priv/gettext/.*(po)$},
      ~r{lib/myapp_web/views/.*(ex)$},
      ~r{lib/myapp_web/templates/.*(eex)$}
    ]
  ]

# Do not include metadata nor timestamps in development logs
config :logger, :console, format: "[$level] $message\n"

# Set a higher stacktrace during development. Avoid configuring such
# in production as building large stacktraces may be expensive.
config :phoenix, :stacktrace_depth, 20

# BCrypt configuration
config :bcrypt_elixir, :log_rounds, 10

config :myapp, MyAppWeb.Guardian,
  issuer: "My App",
  secret_key: "MY_D3V_K3Y"

config :myapp, MyAppWeb.Mailer, adapter: Bamboo.LocalAdapter

config :myapp, :default_app_email, "no-reply@myapp.net"
config :myapp, :analytics_id, ""
config :myapp, :telegram_channel, "myapp_st"

# Import custom configuration
import_config "dev.secret.exs"

Does that help? Or do you need anymore infos? If so let me know :slight_smile:

4

Maybe You could try this for the watchers… at least it is what I use :slight_smile:

I am on latest Phoenix, but with webpack instead of esbuild.

  watchers: [
    # Start the esbuild watcher by calling Esbuild.install_and_run(:default, args)
    # esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]}

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

I do not use npm script, but I probably could too…

  "scripts": {
    "deploy": "webpack --mode production",
    "watch": "webpack --mode development --watch"
  },